val-zhang / webpack-demo Goto Github PK
View Code? Open in Web Editor NEWA simple demo to use React with webpack
A simple demo to use React with webpack
为什么clone失败了呢
git -c filter.lfs.smudge= -c filter.lfs.required=false -c diff.mnemonicprefix=false -c core.quotepath=false --no-optional-locks clone --branch master https://github.com/Val-Zhang/webpack-demo.git E:\webpack-study\webpack-demo
Cloning into 'E:\webpack-study\webpack-demo'...
fatal: BUG: initial ref transaction called with existing refs
pm ERR! Unexpected end of JSON input while parsing near '...480441473","size":100'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache_logs\2018-09-19T09_16_09_203Z-debug.log
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 3000
},
配置麻烦,建议在package.json里scripts里增加,示例如下:
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open --contentBase src --hot"
},
刚开始是跟着你的这篇webpack入门教程https://segmentfault.com/a/1190000006178770自己照着敲一遍,我用的是webstorm。然后敲的过程中会有些问题,我就自己上网搜索方法解决了,但是,按照教程顺序到了Babel这部分,我现在卡在这里了。因为我的localhost:8080这时候页面无法正常显示。以下是教程原文Babel部分我复制的(我知道有提到最新版更新,可是我是菜鸟刚入前端的坑,你这个github最新版的我也不知道是怎么搭建出来的啊~~~~~~)希望大佬能否搭救一下我啊!!!!万分感谢!期待大佬的回复!!
Babel
Babel其实是一个编译JavaScript的平台,它可以编译代码帮你达到以下目的:
让你能使用最新的JavaScript代码(ES6,ES7...),而不用管新标准是否被当前使用的浏览器完全支持;
让你能使用基于JavaScript进行了拓展的语言,比如React的JSX;
Babel的安装与配置
Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包(用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包)。
我们先来一次性安装这些依赖包
// npm一次性安装多个依赖模块,模块之间用空格隔开
npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react
在webpack中配置Babel的方法如下:
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
},
devtool: 'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
historyApiFallback: true,//不跳转
inline: true//实时刷新
},
module: {
rules: [
{
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader",
options: {
presets: [
"env", "react"
]
}
},
exclude: /node_modules/
}
]
}
};
现在你的webpack的配置已经允许你使用ES6以及JSX的语法了。继续用上面的例子进行测试,不过这次我们会使用React,记得先安装 React 和 React-DOM
npm install --save react react-dom
接下来我们使用ES6的语法,更新Greeter.js并返回一个React组件
//Greeter,js
import React, {Component} from 'react'
import config from './config.json';
class Greeter extends Component{
render() {
return (
export default Greeter
修改main.js如下,使用ES6的模块定义和渲染Greeter模块
// main.js
import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
render(, document.getElementById('root'));
重新使用npm start打包,如果之前打开的本地服务器没有关闭,你应该可以在localhost:8080下看到与之前一样的内容,这说明react和es6被正常打包了。
我在入口函数main.js里放了一个类
class Person{
static info = {
name: 'dd',
age: 20
}
}
2、安装了相应的Loader
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
3、在webpack.config.js里配置了module的rules
module: {//配置所有第三方Loader模块的
rules: [//第三方匹配规则
{ test: /.css$/, use: ['style-loader','css-loader'] },//处理css文件的loader
{ test: /.less$/, use: ['style-loader','css-loader','less-loader'] },//处理less文件的loader
{ test: /.scss$/, use: ['style-loader','css-loader','sass-loader'] },//处理scss文件的loader
{ test: /.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=244&name=[hash:8]-[name].[ext]' },
//处理scss文件的loader,limit是限制图片大小。如果图片大小大于或等于limit,不转为base64
{ test: /.(ttf|eot|svg|woff|woff2)$/, use:'url-loader'}, //这是处理字体文件的配置
{
//cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
//cnpm i babel-preset-env babel-preset-stage-0 -D
test: /(.jsx|.js)$/,
use: {
loader: "babel-loader"
},
exclude: /node_modules/
}//这是配置babel,来转换高级ES6语法
]
}
运行npm run dev,提示错误
ERROR in ./src/main.js
Module build failed (from ./node_modules/_babel-loader@8.0.4@babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In D:\00 projects\day6\01.webpack-study\node_modules\babel-preset-stage-0\lib\index.js
这是什么原因?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.