webpack安装_初识webpack

文中的操作均在 webpack3 版本的情况下操作。

什么是webpack？

webpack 是一个模块打包器，在 webpack 看来，前端的所有资源文件都会作为模块处理。它将根据模块的依赖关系进行静态分析，生成对应的静态资源。

四个核心概念

entry

入口起点，指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。

output

输出，告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。

loader

让 webpack 能去处理那些非 JavaScript 文件。

webpack 本身只能加载 js/json 模块，如果非要加载其他文件，则需要使用对应的 loader 进行加载/转换
loader 本身也是运行在 node.js 环境中的 JavaScript 模块
loader 本身是一个函数，接收源文件作为参数，返回转换的结果
一般以 xxx-loader 命名，xxx 代表这个 loader 要做的转换功能，比如：json-loader

plugins

插件，用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件一般可以完成一些 loader 不能完成的功能，通常在 webpack 的配置信息 plugins 中指定。

CleanWebpackPlugin：自动清除指定文件夹资源
HtmlWebpackPlugin：自动生成 html 文件
UglifyJSPlugin：压缩 js 文件

文件夹命名

src

源代码，存放程序员开发的最原始的代码。

build

简单的编译并合并原始代码。

dev

开发环境部署，将代码在服务器上跑起来，需要自己配置的服务器。

dist

最终经过编译、语法检查、压缩等操作之后的代码，最终给生产环境的代码。

开启项目

1 初始化项目

npm init

2 安装 webpack

npm install webpack@3 -g 全局安装

npm install webpack@3 --save-dev 局部安装

3 编译一个 js 文件

webpack src/js/index.js build/index.js

创建核心文件 webpack.config.js

1 通过 Common.js（module.exports）暴露出去一个对象

2 定义四个关键概念 entry、output、module、plugins

3 在终端输入 webpack src/js/index.js build/index.js 即可将 src 文件夹下的index.js 的文件以及其依赖打包成 build 文件夹下的 index.js 中。

使用 less-loader 解析 less 文件

1 安装 less-loader

npm install --save-dev less-loader less

2 安装 css/style-loader

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

3 向rules中写入配置：

{test: /.less$/,use: [// 创建一个style标签，将js中的css放入其中{ loader: "style-loader" },// 将css以CommonJs语法打包到js中{ loader: "css-loader" },// 将less转换成css{  loader: "less-loader"  }]
}

4 在入口 js 中引入 less 文件

import '../less/demo.less';

使用 file-loader 处理图片资源

1 安装 file-loader

npm install --save-dev file-loader

2 新增 loader

{test: /.(png|jpg|gif)$/,use: [{loader: 'file-loader',options: {outputPath: 'images/', //决定输出文件的位置publicPath: '../images/',   // css资源路径图片name: '[hash:5].[ext]'  // 文件名称截取 hash值的前五位     }}]
}

url-loader 处理图片资源&base64

1 安装 url-loader

npm install --save-dev url-loader

2 修改 loader

{test: /.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {outputPath: 'images/', //决定输出文件的位置publicPath: '../images/',   // css资源路径图片name: '[hash:5].[ext]',  // 截取 hash值的前五位limit: 8192  // 8kb大小以下的图片文件都用base64处理}}]
}

使用插件提取css，合并为单独的文件

1 安装 ExtractTextWebpackPlugin插件

npm install --save-dev extract-text-webpack-plugin

2 引入插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

3 新增 plugins 插件配置项

plugins: [//提取css为单独文件new ExtractTextPlugin("./css/index.css"),
]

4 修改 less-loader

{test: /.less$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: ["css-loader","less-loader"]})
}

js语法检查和转化

1 安装 jshint-loader

npm install --save-dev jshint-loader

2 安装 js-hint

npm install jshint --save-dev

3 新增 loader

{test: /.js$/, // 涵盖 .js 文件enforce: "pre", // 预先加载好 jshint loaderexclude: /node_modules/, // 排除掉 node_modules 文件夹下的所有文件use: [{loader: "jshint-loader",options: {//jslint 的错误信息在默认情况下会显示为 warning（警告）类信息//将 emitErrors 参数设置为 true 可使错误显示为 error（错误）类信息emitErrors: false,//jshint 默认情况下不会打断webpack编译//如果你想在 jshint 出现错误时，立刻停止编译//请设置 failOnHint 参数为truefailOnHint: false,// 设置 ES 版本esversion: 6}}]
}

es6 转 es5

1 安装 babel-loader

npm install babel-loader babel-core babel-preset-es2015 --save-dev

2 安装 babel/core

npm install babel-loader@7 --save-dev

3 新增 loader

{test: /.js$/,exclude: /(node_modules|bower_components)/,  // 排除 node_modules 等文件夹use: {loader: 'babel-loader',options: {presets: ['es2015']}}
}

html文件的处理和清除文件夹

html 文件的处理

1 安装 HtmlWebpackPlugin

npm install html-webpack-plugin --save-dev

2 引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

3 新增一个插件配置项

new HtmlWebpackPlugin({// html文档中的title标签（页签名字）title: "project-name",// 指定生成文件的名字filename: "index.html",// 生成文件所用的模板（程序员自己写的页面）template: "./src/index.html"
})

清除文件夹

1 安装 clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

2 引入插件

const CleanWebpackPlugin = require('clean-webpack-plugin');

3 新增一个插件配置项

new CleanWebpackPlugin()

build 环境的搭建

1 新建 common 文件夹

2 移动 webpack.config.js 到文件夹 config 中，并改名为 webpack.build.js

3 在 package.json 中自定义命令 build

"build": "webpack --display-modules --config ./config/webpack.build.js"

4 使用 npm run build 运行上述命令

5 修改 output 中的 path

resolve(__dirname, '../build')

dev 环境的搭建

1 在 build 配置文件的基础上，增加 dev-server，跟 plugins、entry等同级

2 安装 dev-server

npm i webpack-dev-server@2 --save-dev

3 在 package.json 中自定义命令 dev

"dev": "webpack-dev-server --config ./config/webpack.dev.js"

4 使用 npm run dev 运行上述命令

5 配置 devServer

devServer: {// 模块热更新hot: true,// 自动打开浏览器open:true,// 开发服务器端口号port:3001,// 启用gzipcompress:true
}

因为热模替换只支持使用 loader 处理的文件，不支持使用插件。因此启用 HMR 需要做以下操作：

引入webppack：const webpack = require('webpack');
追加一个插件：new webpack.HotModuleReplacementPlugin()
css 替换成 loader 的方式加载，dev 模式下会将 css 合并成一个单独的文件并引入
安装 html-loader：npm i html-loader --save-dev
将配置文件中的入口文件追加 html 文件为入口文件：entry: ['./src/js/index.js', './src/index.html']

注：热模替换只是对css的局部刷新，更新js或html相当于触发了F5刷新按钮；而且dev方式的运行是加载在内存中的，没有任何输出。

提取公共代码实现复用

1 参考 webpack.build.js 新增 webpack.common.js

2 安装合并库 merge

npm i webpack-merge --save-dev

3 将文件合并

module.exports = merge(common,{当前文件所有配置})

4 webpack.common.js 处理

删除 css-loader
删除 CleanWebpackPlugin
删除 ExtractTextPlugin插件
删除相关引用

5 webpack.build.js 处理

引入 const common = require('./webpack.common')
引入merge库：const merge = require('webpack-merge')
删除入口、出口配置
删除 loader 中的图片处理、js语法检查、ES6转换
删除插件中的 HtmlWebpackPlugin

6 webpack.dev.js 处理

引入 const common = require('./webpack.common')
引入merge库：const merge = require('webpack-merge')
删除出口配置
删除 loader 中的图片处理、js语法检查、ES6转换
插件只保留 HotModuleReplacementPlugin

prod 环境的搭建

1 复制 webpack.build.js 改名为 webpack.prod.js

2 package.json 配置

"prod": "webpack --display-modules --config ./config/webpack.prod.js"

3 使用 npm run prod 运行上述命令

4 修改出口配置

path: resolve(__dirname, '../dist'), filename: './js/[name].[hash:10].js'

5 修改 css 配置

new ExtractTextPlugin("./css/[name].[hash:10].css")

6 压缩 js

使用插件 UglifyjsWebpackPlugin
引入 webpack：const webpack = require('webpack')
插件中新增配置：new webpack.optimize.UglifyJsPlugin({sourceMap:true})
追加一个配置（与plugins，entry同级）：devtool:'source-map'

7 css 扩展前缀

安装 postcss-loader：npm i --save-dev postcss-loader
修改 css-loader：use: ["css-loader","postcss-loader","less-loader"]
在根目录新建 postcss.config.js，内容为：

module.exports = {"plugins": {"autoprefixer": {"browsers": ["ie >= 8","ff >= 30","chrome >= 34","safari >= 7","opera >= 23"]}}
}

修改 loader

{test: /.css$/,use: ExtractTextPlugin.extract({fallback: "style-loader",use: ['css-loader', 'postcss-loader']})
}

安装所需的 autoprefixer：npm i autoprefixer --save-dev

8 压缩 css

安装 less-plugin-clean-css 插件：npm i less-plugin-clean-css --save-dev
引入插件：const CleanCSSPlugin = require("less-plugin-clean-css")
替换 use 中的 less-loader 为对象

{loader: "less-loader", options: {plugins: [new CleanCSSPlugin({ advanced: true })]}
}

9 压缩 html

复制 webpack.common.js 中的 HtmlWebpackPlugin
追加一个配置项：minify:{ removeComments:true, collapseWhitespace:true}