webpack2的学习_H5之家 - 中国HTML5教程资源分享第一站

webpack2学习

1. webpack2基本介绍 1.1. 介绍

webpack和gulp一样是一个自动化的构建工具

你不想做的东西都交给工具去做，比如混淆，压缩，移动，合并，添加浏览器兼容性词缀

gulp更适合做简单的流程性的操作，webpack是专门为处理SPA应用的复杂文件依赖而出现的

如图

js引用css，js引用图片，css引用图片，css引用字体，sass引用sass

webpack就可以把上面的东西css都抽出来，所有的图片都抽出来

webpack主要用于react和vue的构建,普通的静态页面用gulp就足够了

1.2. 官网

webpack2:https://webpack.js.org/

webpack1:

1.3. webpack1和webpack2的一些区别 1.4. 快速开始 1.4.1. 新建项目结构

1.4.2. 安装依赖

npm install webpack -g

npm install webpack -save-dev

1.4.3. 编写配置文件 var path=require('path') module.exports = { // 指定spa应用的入口文件 entry: path.resolve(__dirname, 'src/js/app.js'), // 指定项目构建的输出位置 output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', } } 1.4.4. 运行

在项目根目录执行webpack可以启动默认配置文件webpack.config.js

运行指定配置文件执行webpack --config webpack.develop.config.js

1.4.5. 把运行命令放到package.json文件中

启动命令还可以加很多参数webpack --config webpack.develop.config.js --progress --profile --colors

这么多参数不可能都记住，所以将启动命令写到package.json的script标签中

1.4.6. 监听代码变化自动重新构建

代码的变动需要多次运行npm run develop所以我们需要自动监听代码变动，然后运行构建，于是我们用到了webpack-dev-server这个模块

1.4.6.1. webpack-deve-server介绍

webpack-dev-server封装了webpack和http模块

所以webpack的所有命令，webpack-deve-server都可以使用

webpack-dev-server可以指定一个文件夹启动一个服务

webpack-dev-server启动的服务所有的内容都构建在内存中

因为构建在内存中速度快，还有一个功能，就是没有变化的文件，不重新构建，只有变化了的文件才从新执行构建

作用

一是监听文件变化自动重新构建

二是自动刷新浏览器，可以热更新

1.4.6.2. 基本使用

下载npm install webpack-dev-server@9.9.9 -save-dev,注意选择2.x版本的模块

修改package.json文件中的命令webpack-dev-server --config webpack.develop.config.js --progress --profile --colors

修改开发配置文件

webpack2中推荐所有的服务配置信息都写到配置文件中的devServer属性中，不要写在package.json中

基本配置

devServer: { // 指定启动服务的更目录 contentBase: __dirname + '/src', // 指定端口号 port: 8080, host: 'localhost', // 以下信息可有可无，为了完整 inline: true, historyApiFallback: true, noInfo: false, // stats: 'minimal', // publicPath: publicPath },

1.4.6.3. 热更新

可以不刷新浏览器更新

修改配置文件

devServer: { // 指定启动服务的更目录 contentBase: __dirname + '/src', // 指定端口号 port: 8080, host: 'localhost', // 启用热更新 hot: true, // 以下信息可有可无，为了完整 inline: true, historyApiFallback: true, noInfo: false, // stats: 'minimal', // publicPath: publicPath },

需要配合一个内置插件一起使用

var webpack=require('webpack') plugins: [ new webpack.HotModuleReplacementPlugin(), ] 2. Loaders（加载器）

在真正构建之前做一些预处理操作就叫加载器

2.1. 处理es6、es7、jsx语法加载器 module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: [ { loader: "babel-loader" } ] } ] }

创建.babelrc文件

{ "presets": [ "es2015", "react", "stage-0", "stage-1", "stage-2", "stage-3" ], "plugins": [ "transform-runtime" ] } 2.2. 处理css文件引用的加载器

npm install style-loader css-loader -save-dev

修改配置文件

// 处理在js中引用css文件 { test: /\.css$/, use: ['style-loader', 'css-loader'], }, 2.3. 处理scss或者less文件引用的加载器

npm install sass-loader less-loader node-sass -save-dev

修改配置文件

// 处理在js中引用scss文件 { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], }, { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'], }, 2.4. 处理图片引用的加载器

npm install url-loader file-loader -save-dev

修改配置文件

// 处理图片操作 25000bit ~3kb { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader' }, 2.5. 处理字体文件引用的加载器

npm install url-loader file-loader -save-dev

修改配置文件

// 处理字体文件 { test: /\.(eot|woff|ttf|woff2|svg)$/, use: 'url-loader' } 2.6. 处理浏览器兼容前缀

npm install postcss-loader autoprefixer -save-dev

修改配置文件

{ test: /\.css$/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader!postcss-loader" }) }, // 处理在js中引用scss文件 { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader!postcss-loader!sass-loader" }) }, { test: /\.less$/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader!postcss-loader!less-loader" }) },

新建postcss.config.js

module.exports = { plugins: [ require('autoprefixer')({browsers:'last 2 versions'}) ] } 2.7. 处理统一风格管理

npm install eslint-loader -save-dev

修改配置文件

// 这个只是加载器部分的写法，具体使用请看eslint文档 { enforce: "pre", test: /\.js$/, exclude: /node_modules/, loader: "eslint-loader", options:{ configFile:'.eslintrc.js' } }, 2.8. 处理vue文件

npm install vue-loader -save-dev

修改配置文件

{ test: /\.vue$/, loader: 'vue-loader', options: { loaders: { js: [ 'babel-loader', { loader: "eslint-loader", options: { configFile: '.eslintrc.js' } } ], css: 'style-loader!css-loader' } } }, 3. 发布策略 // 处理图片操作 25000bit ~3kb { test: /\.(png|jpg|jpeg|gif)$/, use: 'url-loader?limit=25000&name=images/[name].[ext]' }, // 处理字体文件 { test: /\.(eot|woff|ttf|woff2|svg)$/, use: 'url-loader?limit=100000&name=fonts/[name].[ext]' }

接下来运行npm run publish就发布了

不过要注意所有的css，js，图片都构建到一个bundle.js文件中了

4. Plugins（插件）

在真正构建之后做一些后处理操作就叫插件

4.1. 删除插件

npm install clean-webpack-plugin -save-dev

使用

var CleanPlugin = require('clean-webpack-plugin'); plugins: [ // 删除文件夹的插件 new CleanPlugin(['dist']) ] 4.2. 抽取公共js插件

使用

entry: { app: path.resolve(__dirname, 'src/js/app.js'), vendors: ['vue','vue-router','vuex'] }, plugins: [ // 分离第三方应用的插件 new webpack.optimize.CommonsChunkPlugin({name: 'vendors', filename: 'vendors.js'}), ] 4.3. 提取样式文件插件

npm install extract-text-webpack-plugin@4.4.4 -save-dev注意下载2.x版本

使用

// 1、抽取css的第三方插件 var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 2、处理在js中引用css文件 { test: /\.css$/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader" }) }, // 处理在js中引用scss文件 { test: /\.scss$/, use: ExtractTextPlugin.extract({ fallbackLoader: "style-loader", loader: "css-loader!sass-loader" }) }, //3、加一个插件 plugins: [ // 删除文件夹的插件 new ExtractTextPlugin("app.css"), ] 4.4. 自动生成html插件

npm install html-webpack-plugin -save-dev

在根目录创建template.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>webpack学习</title> </head> <body> <div></div> </body> </html>

修改配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin'); plugins: [ // 自动生成html插件 new HtmlWebpackPlugin({ template: './src/template.html', htmlWebpackPlugin: { "files": { "css":["app.css"], "js": ["vendors.js", "bundle.js"] } }, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true } }), ] 4.5. 压缩插件

修改配置文件

plugins: [ // 压缩混淆js代码插件 new webpack.optimize.UglifyJsPlugin({ beautify: false, mangle: { screw_ie8: true, keep_fnames: true }, compress: { warnings: false, screw_ie8: true }, comments: false }), ] 4.6. 定义生产环境插件

修改配置文件

plugins: [ // 在构建的过程中删除警告 new webpack.DefinePlugin({ 'process.env':{ NODE_ENV:'"production"' } }) ] 4.7. 自动打开浏览器插件

npm install open-browser-webpack-plugin -save-dev

使用

// 自动打开浏览器插件 var OpenBrowserPlugin = require('open-browser-webpack-plugin') plugins: [ // 删除文件夹的插件 new OpenBrowserPlugin({url: 'http://localhost:8080/', browser: 'chrome'}) ] 5. 高级 5.1. 和gulp的集成

npm install gulp del gulp-sequence -save-dev

编写配置文件

// gulp的任务是控制执行流程，webpack的任务是处理复杂引用的依赖 var gulp = require('gulp'); // 删除文件和目录 var del = require('del'); // 按顺序执行 var gulpSequence = require('gulp-sequence'); // 引入webpack的本地模块 var webpack = require("webpack"); // 引入wbpack的配置文件 var webpackConfig = require("./webpack.publish.config.js"); gulp.task('default', ['sequence'], function () { console.log("项目构建成功"); }); // 流程控制 gulp.task('sequence', gulpSequence('clean','webpack')); // 删除文件和文件夹 gulp.task('clean', function (cb) { //del('dist);// 如果直接给dist的目录，项目启动的顺序还有清除结果会报错，所以要写的更详细一些 del(['dist/*.js', 'dist/*.css', 'dist/images', 'dist/fonts,','dist/*.html']).then(function () { cb() }); }); //写一个任务，在gulp中执行webpack的构建 // gulp 负责任务流程部分的操作，webpack负责复杂模块系统的引用分离工作 gulp.task('webpack', function (cb) { // 执行webpack的构建任务 webpack(webpackConfig, function (err, stats) { if (err) { console.log("构建任务失败"); } else { cb(); } }); }); 5.2. 和eslint的集成 5.3. 代码的异步加载

修改配置文件

output: { publicPath:'http://www.w2bc.com/', chunkFilename: '[name]_[chunkhash:8]_chunk.js' },