Webpack(开发、生产环境配置)

Webpack简介

1.webpack定义
webpack静态资源打包器，前端所有资源（js/css/json/img/less…）作为模块处理，打包生产对应的boundle

2.webpack五大核心
Entry Output Loader Plugins Mode

• entry
  指定本次webpack打包的入口文件（相对地址）

单入口
entry:'./src/index.js'
多入口
entry:{
	main:'./src/main.js',
	other:'./src/other.js'

• output
  指定打包完成之后输出文件地址（绝对地址）及文件名

单文件
output:{
    filename:'bundle.js',
    path:path.join(__dirname,'dist')
}


多文件
output:{
    filename:'[name].js',
    path:path.join(__dirname,'dist')
}

• loaders
  借助loaders将模块放进依赖图中，本质为一个函数，接收源文件为参数，返回转换后的结果；
  webpack默认识别json、js模块
• plugins
  webpack运行到某阶段时候，方便做一些我们需要的事情；如clean-webpack-plugin会在我们进打包的时候先删除dist下的原输出文件
• mode
  指定当前构建环境：production、development、none
  

Webpack初体验

src：初始文件夹 dist：打包之后的文件夹

（1）初始化package.json npm init
（2）下载安装webpack （全局）npm install webpack webpack-cli -g
本地安装（项目内）npm install webpack --save-dev
（3）编译打包 webpack ./src/index.js -o dist/bundle.js --mode=development

webpack以./src/index.js为入口文件开始打包，打包后输出至./dist/bundle.js

结论：
1.webpack能处理js和json文件，不能处理css/img等文件
2.生产/开发环境将ES6模块化编译成浏览器能识别的模块；能压缩代码
3.生产环境比开发环境多一行压缩js代码

• 1、webpack打包样式资源
  webpack.config.js webpack配置文件
  作用：运行webpack指令，加载里面的配置
  1)创建文件
  
  2）下载安装loader包
  npm install css-loader style-loader less-loader less -D

3）修改配置文件webpack.config.js

// resolve 拼接绝对路径的方法
const {resolve} = require('path')

module.exports = {
    // 指定构建模式 development  / production
    mode: 'development',

    // 配置打包的入口entry和出口output
    entry: path.join(__dirname, './src/index.js'),


    output: {
    //__dirname  node.js变量 代表当前文件的目录绝对路径
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件名称
    },

    // 向外暴露配置的对象
    plugins: [htmlPlugin, new VueLoaderPlugin()],

    // 配置自动打包相关参数
    /*  "script": {
        host IP地址  port端口号
         "dev": 'webpack-dev-server --open --host 127.0.0.1 --port 8888'
     } */

	// loader的配置
    module: {
        rules: [
        // test 匹配哪些文件  use使用哪些loader进行处理
        // use数组中执行顺序：从下到上、从右到左
            { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: "url-loader?limit=16940" },
            { test: /\.vue$/, loader: "vue-loader" }
        ]
    },

    devtool: "inline-source-map"
}

/* 所有构建工具基于node.js平台运行，模块化默认采用common.js*/
style-loader：创建style标签，将js中的样式资源插入执行，添加至head中生效
css-loader：将css文件变成common.js模块加载js，里面内容是样式字符串
less-loader：将less文件编译成css文件

4）运行指令：webpack

• 2、打包html资源
  1）下载安装plugin包
  npm install --save-dev html-webpack-plugin

2)修改配置文件

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports ={
	entry:'./src/index.js'
	output:{filename:'bundle.js',path:resolve(__dirname,'dist)}
	module:{
		rules:[//loader]
	}
	plugins:[
	//html-webpack-plugin:默认创建一个html，自动引入打包输出的所有资源js/css
	//复制./src/index.html文件
	new HtmlWebpackPlugin({template:'./src/index.html'})
	]

• 3、打包图片资源
  1）下载安装loader包
  npm install --save-dev html-loader url-loader file-loader
  2)修改配置文件

module:{
	rules:[
	{test:/\.less$/,use:['html-loader'，'url-loader' ，'file-loader']},
	//  处理html中的img图片
	{test:/\.(jpg|png|img)/,loader:'url-loader',options:{
		limit:8*1024,
		esModule:false, // 关闭url-loader的es6模块化，使用common.js解析
		name:'[hash:10].[ext]'
	}},
	// 引入img，被url-loader处理
	{test:/\.html$/,use:['html-loader']}
	
	]
}

• 4、打包其他资源

1）修改配置文件

module:{
	rules:[
	{test:/\.css$/,use:['style-loader'，'css-loader']},
	//  
	{exclude:/\.(html|js|css|img|less)$/,
	loader:'file-loader',
	options:{
	name:'[hash:10].[ext]'
	}},
	
	
	]
}

• 5、devServer
  1）修改配置文件

module.exports = {
	devServer:{
	// 项目打包构建后的目录
		contentBase:resolve(__dirname,'dist')
		// gzip压缩
		compress:true,
		// 端口号
		port:3000,
		// 自动打开浏览器
		open:true
	}
}

2）运行指令 npx webpack-dev-server

• 6、开发环境配置

1）修改配置文件

module.exports={
	entry:
	output:{}
	module:{rules:[//loader配置]}
	plugins:[]
	mode='development'
	
}

webpack生产环境

• 「1」提取css单独文件
  1）下载插件
  npm install --save-dev mini-css-extract-plugin
  2）修改配置文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module:{rules:[
{test:/\.css/,use:[

		MiniCssExtractPlugin.loader, // 取代style-loader，提取js中的css成单独文件
		'css-loader'
]}]}
plugins:[
new MiniCssExtractPlugin({
	filename:'css/bundle.css'
})
]

• 「2」css兼容性处理
  1）下载插件
  npm install --save-dev postcss-loader postcss-preset-env
  2）修改配置文件

// 设置 nodejs 环境变量 
// process.env.NODE_ENV = 'development';
module: { 
	rules: [{
**加粗样式**	test:/\.css$/,
	use:[MiniCssExtractPlugin.loader,'css-loader',{
	loader:'',
	options:{
		ident:'postcss-loader',
		plugins:()=>[// postcss 的插件 require('postcss-preset-env')()]
			
		}
	}]
}]

3）修改package.json文件

"browserslist": {
 "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ],
 "production": [ ">0.2%", "not dead", "not op_mini all" ] }

• 「3」压缩css
  1）下载安装包
  npm install --save-dev optimize-css-assets-webpack-plugin
  2）修改配置文件

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin' )
plugins: [
	// 压缩 css
	 new OptimizeCssAssetsWebpackPlugin()
	]

• 「4」语法检查
  1）下载安装包
  npm install --save-dev eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import
  2）修改配置文件

module: { 
/*语法检查： eslint-loader eslint 
	设置检查规则：
	 package.json 中 eslintConfig 中设置~ "eslintConfig": { "extends": "airbnb-base" }
	airbnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
	rules: [
	{	test:/\.js$/,
		exclude:/node_modules/,
		loader: 'eslint-loader',
		options: { // 自动修复 eslint 的错误 
		fix: true }
	}
]

3）配置package.json

"eslintConfig": { 
	"extends": "airbnb-base", 
	"env": { "browser": true }
 }

• 「5」js兼容性处理
  1）下载安装包
  npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/polyfill core-js
  2）修改配置

module: { rules: [ { test: /\.js$/, 
exclude: /node_modules/,
 loader: 'babel-loader',
  options: { 
  // 预设：指示 babel 做怎么样的兼容性处理
   presets: [ 
   [ '@babel/preset-env', {
   // 按需加载 
   useBuiltIns: 'usage', 
   // 指定 core-js 版本 
   corejs: { version: 3 },
   // 指定兼容性做到哪个版本浏览器
    targets: { chrome: '60', firefox: '60', ie: '9', safari: '10', edge: '17' } } ] ] } } ] },

• 「6」js压缩
  1）修改配置文件

// 生产环境下会自动压缩 js 代码
 mode: 'production'

• 「7」html压缩
  1）修改配置文件

plugins: [ 
new HtmlWebpackPlugin({ 
template: './src/index.html', 
// 压缩 html 代码 
minify: { 
// 移除空格 
collapseWhitespace: true, 
// 移除注释 
removeComments: true } }) ]

• 「8」生产环境配置
  1）修改配置文件

// 定义 nodejs 环境变量：决定使用 browserslist 的哪个环境 
process.env.NODE_ENV = 'production';

// 复用 loader 
const commonCssLoader = [ 
MiniCssExtractPlugin.loader, 'css-loader', { 
// 还需要在 package.json 中定义 browserslist 
loader: 'postcss-loader', 
options: { 
	ident: 'postcss', 
	plugins: () => [require('postcss-preset-env')()] } } ]


module: { 
rules: [ 
{ test: /\.css$/, use: [...commonCssLoader] },
{ test: /\.less$/, use: [...commonCssLoader, 'less-loader']，
{
// 在 package.json 中 eslintConfig --> airbnb 
test: /\.js$/, exclude: /node_modules/, 
// 优先执行 
enforce: 'pre', 
loader: 'eslint-loader', options: { fix: true }},
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', 
options: { 
presets: [ 
[ '@babel/preset-env', 
{ useBuiltIns: 'usage', corejs: {version: 3}, targets: { chrome: '60', firefox: '50' } } ] ] } }
{ test: /\.(jpg|png|gif)/, loader: 'url-loader', options: { limit: 8 * 1024, name: '[hash:10].[ext]', outputPath: 'imgs', esModule: false }
 ],
plugins: [ 
	new MiniCssExtractPlugin({ filename: 'css/built.css' }), 
	new OptimizeCssAssetsWebpackPlugin(), 
	new HtmlWebpackPlugin({ 
	template: './src/index.html', 
	minify: { collapseWhitespace: true, removeComments: true } }) ],