webpack2 实践

实例gif图：

目录截图:

目录介绍：

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

c/:css文件夹;

i/:img文件夹;

j/:js文件夹;

src目录下(开发目录)：

c/:css文件夹;

l/:less文件夹;

s/:sass文件夹;

i/:img文件夹;

j/:js文件夹;

教程开始

原始文件夹:

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

 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 文件：

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",
     "dev": " webpack-dev-server --progress --inline --hot  --colors"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "autoprefixer": "^6.7.4",
     "babel-core": "^6.23.1",
     "babel-loader": "^6.3.2",
     "babel-preset-es2015": "^6.22.0",
     "css-loader": "^0.26.1",
     "cssnano": "^3.10.0",
     "extract-text-webpack-plugin": "^2.0.0-rc.3",
     "file-loader": "^0.10.0",
     "html-webpack-plugin": "^2.28.0",
     "img-loader": "^1.3.1",
     "less": "^2.7.2",
     "less-loader": "^2.2.3",
     "node-sass": "^4.5.0",
     "optimize-css-assets-webpack-plugin": "^1.3.0",
     "postcss-loader": "^1.3.1",
     "sass-loader": "^6.0.1",
     "url-loader": "^0.5.7",
     "webpack": "^2.2.1",
     "webpack-dev-server": "^2.4.1"
   }
 }

第三步

在根目录建webpack.config.js 文件并编写:

 'use strict';

 const webpack = require('webpack');  //webpack模块;
 const path = require('path');         //node 路径模块;
 const ExtractTextPlugin = require("extract-text-webpack-plugin"); //独立打包css模块;
 const HtmlWebpackPlugin = require('html-webpack-plugin');          //html模板模块;
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); //压缩CSS模块;

 module.exports = {
       context: path.resolve(__dirname, './src/j'),  //设置原始文件目录;
       entry: {                                        //打包入口;
         app: './index.js',                            //打包js;
       },
       output: {                                        //打包出口;
           publicPath: "http://localhost:8080/",        //配合devServer本地Server;
         path: path.resolve(__dirname, './dist/'),    //出口地址;
         filename: 'j/[name].bundle.js',                //出口文件名;
       },
       module: {                                        //模块;
         rules: [                                    //原 webpack@1 里 loaders;
             {
                 //正则匹配后缀.js文件;
                 test: /\.js$/,
                 //需要排除的目录
                 exclude: '/node_modules/',
                 //加载babel-loader转译es6
                 use: [{
                   loader: 'babel-loader',
                   //配置参数;
                   options: { presets: ['es2015',] }
                 }],
             },
             {
                 //正则匹配后缀.css文件;
                 test: /\.css$/,
                 //使用html-webpack-plugin插件独立css到一个文件;
                 use: ExtractTextPlugin.extract({
                     //加载css-loader、postcss-loader（编译顺序从下往上）转译css
                       use: [
                           {
                               loader : 'css-loader?importLoaders=1',

                           },
                           {
                               loader : 'postcss-loader',
                               //配置参数;
                               options: {
                                   //从postcss插件autoprefixer 添加css3前缀;
                                 plugins: function() {
                                     return [
                                         //加载autoprefixer并配置前缀,可加载更多postcss插件;
                                         require('autoprefixer')({
                                             browsers: ['ios >= 7.0']
                                         })
                                     ];
                                 }
                             }
                           }
                       ]
                 })
             },
               {
                   //正则匹配后缀.sass、.scss文件;
                 test: /\.(sass|scss)$/,
                 //使用html-webpack-plugin插件独立css到一个文件;
                 use: ExtractTextPlugin.extract({
                       use: [
                           {
                               loader : 'css-loader?importLoaders=1',
                           },
                           {
                               loader : 'postcss-loader',
                               //配置参数;
                               options: {
                                 plugins: function() {
                                     return [
                                         require('autoprefixer')({
                                             browsers: ['ios >= 7.0']
                                         })
                                     ];
                                 }
                             }
                           },
                           {
                               //加载sass-loader同时也得安装node-sass;
                             loader: "sass-loader",
                             //配置参数;
                             options: {
                                 //sass的sourceMap
                                 sourceMap:true,
                                 //输出css的格式两个常用选项:compact({}行), compressed(压缩一行)
                                 outputStyle : 'compact'
                             }
                         }
                       ]
                 })
             },
             {
                 //正则匹配后缀.less文件;
                 test: /\.less$/,
                 //使用html-webpack-plugin插件独立css到一个文件;
                 use: ExtractTextPlugin.extract({
                       use: [
                           {
                               loader : 'css-loader?importLoaders=1',
                           },
                           {
                               loader : 'postcss-loader',
                               //配置参数;
                               options: {
                                 plugins: function() {
                                     return [
                                         require('autoprefixer')({
                                             browsers: ['ios >= 7.0']
                                         })
                                     ];
                                 }
                             }
                           },
                           //加载less-loader同时也得安装less;
                         "less-loader"
                       ]
                 })
             },
             {
                 //正则匹配后缀.png、.jpg、.gif图片文件;
                 test: /\.(png|jpg|gif)$/i,
                 use: [
                     {
                         //加载url-loader 同时安装 file-loader;
                         loader : 'url-loader',
                         options : {
                             //小于10000K的图片文件转base64到css里,当然css文件体积更大;
                             limit : 10000,
                             //设置最终img路径;
                             name : '/i/[name]-[hash].[ext]'
                         }
                     },
                     {
                         //压缩图片(另一个压缩图片：image-webpack-loader);
                         loader : 'img-loader?minimize&optimizationLevel=5&progressive=true'
                     },

                 ]
             }
         ]
       },
       plugins: [                                    //插件;
           //模板插件
           new HtmlWebpackPlugin({
               filename: 'index.html',                    //设置最后生成文件名称;
               template: __dirname+'/src/index.html'   //设置原文件;
           }),
           //独立打包css插件;
         new ExtractTextPlugin({
             filename : 'c/styles.css'                //设置最后css路径、名称;
         }),
         //压缩css（注:因为没有用style-loader打包到js里所以webpack.optimize.UglifyJsPlugin的压缩本身对独立css不管用）;
         new OptimizeCssAssetsPlugin({
           assetNameRegExp: /\.css$/g,                //正则匹配后缀.css文件;
           cssProcessor: require('cssnano'),            //加载‘cssnano’css优化插件;
           cssProcessorOptions: { discardComments: {removeAll: true } }, //插件设置,删除所有注释;
           canPrint: true                             //设置是否可以向控制台打日志,默认为true;
         }),
         //webpack内置js压缩插件;
         new webpack.optimize.UglifyJsPlugin({
             compress: {                               //压缩;
               warnings: false                      //关闭警告;
             }
         }),
         //webpack内置自动加载插件配合resolve.alias做全局插件;
         new webpack.ProvidePlugin({
             $: 'jquery'                              //文件里遇见‘$’加载jquery;
         })
       ],
       devServer: {    //设置本地Server;
         contentBase: path.join(__dirname,'dist'),  //设置启动文件目录;
         port: 8080,      //设置端口号；
         compress: true, //设置gzip压缩;
         //inline:true,  //开启更新客户端入口(可在package.json scripts 里设置 npm run xxx);
         //hot: true    //设置热更新(可在package.json scripts 里设置 npm run xxx);
       },
       resolve:{
           //设置可省略文件后缀名(注:如果有文件没有后缀设置‘’会在编译时会报错,必须改成' '中间加个空格。ps:虽然看起来很强大但有时候省略后缀真不知道加载是啥啊~);
           extensions: [' ','.css','.scss','.sass','.less','.js','.json'],
           //查找module的话从这里开始查找;
         modules: [path.resolve(__dirname, "src"), "node_modules"], //绝对路径;
         //别名设置,主要是为了配和webpack.ProvidePlugin设置全局插件;
           alias: {
               //设置全局jquery插件;
             jquery: path.resolve(__dirname,'./src/j/jquery.min.js') //绝对路径;
         }
       }
 };

第四步

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

第五步

webpack 常用命令

 webpack 最基本的启动webpack命令
 webpack -w 提供watch方法，实时进行打包更新
 webpack -p 对打包后的文件进行压缩
 webpack -d 提供SourceMaps，方便调试
 webpack --colors 输出结果带彩色，比如：会用红色显示耗时较长的步骤
 webpack --profile 输出性能数据，可以看到每一步的耗时
 webpack --display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
 webpack --progress 显示编译进度
 webpack-dev-server --inline 开启更新客户端入口
 webpack-dev-server --hot 开启热更新

老写那么长的命令四不四撒 所以在package.json 编写 npm scripts 集成命令：

 "webpack": "webpack --config webpack.config.js --display-modules --progress -w -d --colors ",
 "dev": " webpack-dev-server --progress --inline --hot  --colors"

栗子截图：

第六步

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

 npm run webpack
 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