webpack2 项目

实例gif图： 

 

目录截图:

 

目录介绍：

dist目录(最后生成的目录,里面文件为配置webpack自动生成的)：

c/:css文件夹;

i/:img文件夹;

j/:js文件夹;

src目录下(开发目录)：

c/:css文件夹;

l/:less文件夹;

s/:sass文件夹;

i/:img文件夹;

j/:js文件夹;

 

教程开始

原始文件夹:

第一步 
在CMD生成默认package.json文件：

1 npm init -y

 栗子截图:

第二步

在CMD安装插件：

npm install   autoprefixer 
              babel-core babel-loader babel-preset-es2015 css-loader cssnano extract-text-webpack-plugin file-loader html-webpack-plugin img-loader less less-loader node-sass optimize-css-assets-webpack-plugin postcss-loader sass-loader url-loader webpack webpack-dev-server --save-dev 

栗子截图:(别一口气把插件全写上跑。。。。)

最终 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 };

第四步

在index.js 入口js文件 引入须要打包文件（真实项目里也不太可能less\sass\css 三个混着写,示例而已）:

第五步

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"

栗子截图：

第六步

CMD跑 npm run webpack 完成以后在 跑 npm run dev 启动服务：

1 npm run webpack 2 npm run dev

栗子截图：

 

最后就能够打开 http://localhost:8080/ 实时更新了啦！

 

后记：

其实这里面有个问题我没有解决就是实时更新独立的CSS文件 

由于我没有style-loader 把CSS打包到js里而是独立出一个CSS文件(不要问我为何不用,由于不喜欢)

因此我在改src/里的css文件时 虽然webpack是检测有文件更改 但由于更改css不在js里

它就没新刷浏览器,独立的css也没法热更新,在网上找了好多文章也没看到相似的问题~

 

参考资料：

webpack : http://webpack.github.io/

webpack中文指南 : http://webpackdoc.com/

愚人码头 : http://www.css88.com/archives/6992

qbaty : http://www.imooc.com/learn/802