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文件 引入需要打包文件（真实项目里也不太可能lesssasscss 三个混着写,示例而已）:

第五步

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