一、准备工作
1、下载、安装node nodejs.cn
在这里,可以安装一个淘宝镜像,方便之后要安装的东西,提升速度
安装之后,以下所有npm的命令改为cnpm即可
$ npm install cnpm -g --registry=https://registry.npm.taobao.org
2、 用npms生成 package.json
$ npm init
3、安装webpack
$ npm install webpack –g
//或 将 Webpack 安装到项目的依赖中
$ npm install webpack --save-dev
//其中--save-dev 会将安装的模块和版本信息写入package.json
二、使用
1、在项目的根目录添加webpack.config.js
var webpack = require('webpack');
module.exports = {
// 配置入口
entry: {
example: './js/example.js'
},
// 编译后的文件路径
output: {
path: './build/jsBuild',
filename: '[name].build.js'
},
module: {
// 编译规则,根据不同的需要添加需要编译的规则
loaders: []
},
// 辅助的插件
plugins: [ ]
};
2、js文件压缩打包
//监听变动并自动打包
$ webpack -w --config webpack.config.js
//压缩混淆脚本
$ webpack –p --config webpack.config.js
3、css文件单独打包
- 安装插件extract-text-webpack-plugin,安装css-loader及style-loader
$ npm install extract-text-webpack-plugin --save-dev
$ npm install --save-dev css-loader style-loader
- 然后按照上述webpack.config.js文件添加css相关配置项,包括:
// 引入css 单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
// 设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractTextPlugin('./cssBuild/[name].min.css');
//在plugins 中引入并使用
plugins: [
packCSS
]
//配置编译规则
loaders: [
{test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
]
//我们需要首先在入口js文件中引用相应的css文件
require('./css/example.css');
4、sass文件编译及打包
- 安装sass-loader及node-loader
$ npm install --save-dev sass-loader
$ npm install --save-dev node-sass
- 在配置文件中添加相应配置
//更改配置文件,在loader中添加如下代码
{
test:/\.scss$/,
loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')
}
//在js中引入相应的scss文件
require('../sass/sassTest.scss');
5、es6风格代码编译为es201风格
- 安装babel-loader 和 转码规则
$ npm install babel-loader --save-dev
$ npm install babel-preset-es2015 --save-dev
- 添加相应配置
module: {
// 编译规则
loaders: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {presets: ['es2015']}
}
]
},
经过上述步骤,最终的webpack.config.js文件
var webpack = require('webpack');
//引入css打包插件
var ExtractPlugin = require('extract-text-webpack-plugin');
//设置生成css 的路径和文件名,会自动将对应entry入口js文件中引入的CSS抽出成单独的文件
var packCSS = new ExtractPlugin('../cssBuild/[name].min.css');
module.exports = {
// 配置入口
entry: {
example: './js/index.js'
},
// 编译后的文件路径
output: {
path: './build/jsBuild',
filename: '[name].build.js'
},
module: {
// 编译规则,根据不同的需要添加需要编译的规则
loaders: [
{test: /\.css$/,loader: ExtractPlugin.extract("style-loader", "css-loader")},
{test: /\.scss$/,loader:ExtractPlugin.extract('style-loader', 'css-loader!sass-loader')},
{test: /\.js$/,exclude: /(node_modules|bower_components)/,loader: 'babel-loader',query: {presets: ['es2015']}}
]
},
// 辅助的插件
plugins:[
packCSS
]
}