使用webpack快速搭建最简单ES6环境
目录如下:
myProject---|
|node_modules
|prd---|
|build.js
|index.html
|src---|
|index.js
|.babelrc
|package.json
|webpack.config.js
开始搭建,步骤如下:
第一步,安装依赖包:
npm install -g webpack
npm init
npm install --save-dev webpack
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save-dev
至此,完成js babel-loader的安装。npm install --save-dev webpack-dev-sever :热更新
第二步,配置文件:
.babelrc
{
"presets": [
"es2015"
],
"plugins": []
}
webpack.config.js
module.exports = {
entry: "./src/index.js",
output: {
filename: "prd/build.js"
},
module: {
loaders: [
{ test: /\.js$/,loader: "babel-loader" }
]
},
resolve: {
extensions: ['.js', '.jsx']
},
plugins: [],
devtool:'eval-source-map',
devServer: {
contentBase: "./public",//本地服务器所加载的页面所在的目录
colors: true,//终端中输出结果为彩色
historyApiFallback: true,//不跳转
inline: true//实时刷新
}
};
第三步,启动服务
webpack -w
想要了解更多webpack相关知识,推荐点击:
入门Webpack,看这篇就够了