webpack2.x基本配置总结

原创 夏天不做梦 随笔 webpack2.x 216阅读 2017-05-19 17:35:29 举报

安装

1.进入项目根目录并初始化 cnpm init

2.全局安装cnpm install -g webpack
在当前安装cnpm install webpack --save-dev

3.新建webpack.config.js文件

使用html-webpack-plugin打包成html页面

1.安装 cnpm install html-webpack-plugin --save-dev

2.用require方法引入
var htmlWebpackPlugin = require('html-webpack-plugin');

3.打包配置
此配置为单页面打包,若需多页面再下方再添加一项new htmlWebpackPlugin()配置
javascript 代码

4.模板文件使用
htmlWebpackPlugin有两个key值 files\options

html 代码

使用loader

1.转译js文件

安装babel-loader
cnpm install babel-loader babel-core babel-preset-env webpack --save-dev

配置文件中
javascript 代码

打包后如果报错找不到 babel-template 就安装
cnpm install babel-template --save-dev

2.转译css文件

安装css-loader style-loader
cnpm install css-loader style-loader --save-dev

安装postcss-loader
cnpm install postcss-loader --save-dev

安装postcss-import 为一些css自动添加兼容浏览器的前缀
cnpm install postcss-import --save-dev

javascript 代码

3.转译less文件

安装less
cnpm install less --save-dev

安装less-loader
cnpm install less-loader --save-dev

注意less-loader要放到最前面,处理loader代码是从右开始
javascript 代码

4.转译sass文件同less一样

安装node-sass
cnpm install node-sass --save-dev

安装sass-loader
cnpm install sass-loader --save-dev

5.转译html文件

安装html-loader
cnpm install html-loader --save-dev

安装node-sass
cnpm install node-sass --save-dev
javascript 代码

6.转译ejs\tpl文件

安装html-loader
cnpm install ejs-loader --save-dev
javascript 代码

7.处理写在css中的图片

安装file-loader
cnpm install file-loader --save-dev

安装url-loader
cnpm install url-loader --save-dev

<!-- 组件中引入图片必须用这个require方法 -->
<img src="${ require('../../assets/bg.jpg') }">
javascript 代码

package.json配置文件

json 代码

完整配置文件

javascript 代码

完结

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复