在CMD生成默认package.json文件：
1 npm init -y
基础安装包：
1 autoprefixer 2 babel-core babel-loader 3 babel-preset-es2015 4 css-loader 5 cssnano 6 extract-text-webpack-plugin 7 file-loader 8 html-webpack-plugin 9 img-loader 10 less 11 less-loader 12 node-sass 13 optimize-css-assets-webpack-plugin 14 postcss-loader 15 sass-loader 16 url-loader 17 webpack 18 webpack-dev-server 19
最终 package.json 文件：
1 {
2 "name": "webpack-demo",
3 "version": "1.0.0",
4 "description": "",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo "Error: no test specified" && exit 1",
8 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",
9 "dev": " webpack-dev-server --progress --inline --hot --colors"
10 },
11 "keywords": [],
12 "author": "",
13 "license": "ISC",
14 "devDependencies": {
15 "autoprefixer": "^6.7.4",
16 "babel-core": "^6.23.1",
17 "babel-loader": "^6.3.2",
18 "babel-preset-es2015": "^6.22.0",
19 "css-loader": "^0.26.1",
20 "cssnano": "^3.10.0",
21 "extract-text-webpack-plugin": "^2.0.0-rc.3",
22 "file-loader": "^0.10.0",
23 "html-webpack-plugin": "^2.28.0",
24 "img-loader": "^1.3.1",
25 "less": "^2.7.2",
26 "less-loader": "^2.2.3",
27 "node-sass": "^4.5.0",
28 "optimize-css-assets-webpack-plugin": "^1.3.0",
29 "postcss-loader": "^1.3.1",
30 "sass-loader": "^6.0.1",
31 "url-loader": "^0.5.7",
32 "webpack": "^2.2.1",
33 "webpack-dev-server": "^2.4.1"
34 }
35 }
在根目录建webpack.config.js 文件并编写:
1 'use strict';
2
3 const webpack = require('webpack'); //webpack模块;
4 const path = require('path'); //node 路径模块;
5 const ExtractTextPlugin = require("extract-text-webpack-plugin"); //独立打包css模块;
6 const HtmlWebpackPlugin = require('html-webpack-plugin'); //html模板模块;
7 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;
8
9 module.exports = {
10 context: path.resolve(__dirname, './src/j'), //设置原始文件目录;
11 entry: { //打包入口;
12 app: './index.js', //打包js;
13 },
14 output: { //打包出口;
15 publicPath: "http://localhost:8080/", //配合devServer本地Server;
16 path: path.resolve(__dirname, './dist/'), //出口地址;
17 filename: 'j/[name].bundle.js', //出口文件名;
18 },
19 module: { //模块;
20 rules: [ //原 webpack@1 里 loaders;
21 {
22 //正则匹配后缀.js文件;
23 test: /.js$/,
24 //需要排除的目录
25 exclude: '/node_modules/',
26 //加载babel-loader转译es6
27 use: [{
28 loader: 'babel-loader',
29 //配置参数;
30 options: { presets: ['es2015',] }
31 }],
32 },
33 {
34 //正则匹配后缀.css文件;
35 test: /.css$/,
36 //使用html-webpack-plugin插件独立css到一个文件;
37 use: ExtractTextPlugin.extract({
38 //加载css-loader、postcss-loader（编译顺序从下往上）转译css
39 use: [
40 {
41 loader : 'css-loader?importLoaders=1',
42
43 },
44 {
45 loader : 'postcss-loader',
46 //配置参数;
47 options: {
48 //从postcss插件autoprefixer 添加css3前缀;
49 plugins: function() {
50 return [
51 //加载autoprefixer并配置前缀,可加载更多postcss插件;
52 require('autoprefixer')({
53 browsers: ['ios >= 7.0']
54 })
55 ];
56 }
57 }
58 }
59 ]
60 })
61 },
62 {
63 //正则匹配后缀.sass、.scss文件;
64 test: /.(sass|scss)$/,
65 //使用html-webpack-plugin插件独立css到一个文件;
66 use: ExtractTextPlugin.extract({
67 use: [
68 {
69 loader : 'css-loader?importLoaders=1',
70 },
71 {
72 loader : 'postcss-loader',
73 //配置参数;
74 options: {
75 plugins: function() {
76 return [
77 require('autoprefixer')({
78 browsers: ['ios >= 7.0']
79 })
80 ];
81 }
82 }
83 },
84 {
85 //加载sass-loader同时也得安装node-sass;
86 loader: "sass-loader",
87 //配置参数;
88 options: {
89 //sass的sourceMap
90 sourceMap:true,
91 //输出css的格式两个常用选项:compact({}行), compressed(压缩一行)
92 outputStyle : 'compact'
93 }
94 }
95 ]
96 })
97 },
98 {
99 //正则匹配后缀.less文件;
100 test: /.less$/,
101 //使用html-webpack-plugin插件独立css到一个文件;
102 use: ExtractTextPlugin.extract({
103 use: [
104 {
105 loader : 'css-loader?importLoaders=1',
106 },
107 {
108 loader : 'postcss-loader',
109 //配置参数;
110 options: {
111 plugins: function() {
112 return [
113 require('autoprefixer')({
114 browsers: ['ios >= 7.0']
115 })
116 ];
117 }
118 }
119 },
120 //加载less-loader同时也得安装less;
121 "less-loader"
122 ]
123 })
124 },
125 {
126 //正则匹配后缀.png、.jpg、.gif图片文件;
127 test: /.(png|jpg|gif)$/i,
128 use: [
129 {
130 //加载url-loader 同时安装 file-loader;
131 loader : 'url-loader',
132 options : {
133 //小于10000K的图片文件转base64到css里,当然css文件体积更大;
134 limit : 10000,
135 //设置最终img路径;
136 name : '/i/[name]-[hash].[ext]'
137 }
138 },
139 {
140 //压缩图片(另一个压缩图片：image-webpack-loader);
141 loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
142 },
143
144 ]
145 }
146 ]
147 },
148 plugins: [ //插件;
149 //模板插件
150 new HtmlWebpackPlugin({
151 filename: 'index.html', //设置最后生成文件名称;
152 template: __dirname+'/src/index.html' //设置原文件;
153 }),
154 //独立打包css插件;
155 new ExtractTextPlugin({
156 filename : 'c/styles.css' //设置最后css路径、名称;
157 }),
158 //压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
159 new OptimizeCssAssetsPlugin({
160 assetNameRegExp: /.css$/g, //正则匹配后缀.css文件;
161 cssProcessor: require('cssnano'), //加载‘cssnano’css优化插件;
162 cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
163 canPrint: true //设置是否可以向控制台打日志,默认为true;
164 }),
165 //webpack内置js压缩插件;
166 new webpack.optimize.UglifyJsPlugin({
167 compress: { //压缩;
168 warnings: false //关闭警告;
169 }
170 }),
171 //webpack内置自动加载插件配合resolve.alias做全局插件;
172 new webpack.ProvidePlugin({
173 $: 'jquery' //文件里遇见‘$’加载jquery;
174 })
175 ],
176 devServer: { //设置本地Server;
177 contentBase: path.join(__dirname,'dist'), //设置启动文件目录;
178 port: 8080, //设置端口号；
179 compress: true, //设置gzip压缩;
180 //inline:true, //开启更新客户端入口(可在package.json scripts 里设置 npm run xxx);
181 //hot: true //设置热更新(可在package.json scripts 里设置 npm run xxx);
182 },
183 resolve:{
184 //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
185 extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
186 //查找module的话从这里开始查找;
187 modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
188 //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
189 alias: {
190 //设置全局jquery插件;
191 jquery: path.resolve(__dirname,'./src/j/jquery.min.js') //绝对路径;
192 }
193 }
194 };
webpack 常用命令
1 webpack 最基本的启动webpack命令 2 webpack -w 提供watch方法，实时进行打包更新 3 webpack -p 对打包后的文件进行压缩 4 webpack -d 提供SourceMaps，方便调试 5 webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤 6 webpack --profile 输出性能数据，可以看到每一步的耗时 7 webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块 8 webpack --progress 显示编译进度 9 webpack-dev-server --inline 开启更新客户端入口 10 webpack-dev-server --hot 开启热更新
老写那么长的命令四不四撒 所以在package.json 编写 npm scripts 集成命令：
1 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ", 2 "dev": " webpack-dev-server --progress --inline --hot --colors"
参考：
http://www.cnblogs.com/auok/p/6420843.html