webpack2 实践

最新推荐文章于 2023-07-16 21:24:49 发布

weixin_30828379

最新推荐文章于 2023-07-16 21:24:49 发布

阅读量99

点赞数

文章标签： webpack json javascript ViewUI

原文链接：http://www.cnblogs.com/auok/p/6420843.html

版权

实例gif图：

目录截图:

目录介绍：

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

c/:css文件夹;

i/:img文件夹;

j/:js文件夹;

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"

栗子截图：