bilibili-webpack-01

P01 webpack简介

webpack作用：代码转换，文件优化，代码分割，模块合并，自动刷新，代码校验，自动发布

P02 安装

安装: `cnpm i -D webpack webpack-cli`
默认配置文件： `webpack.config.js`

入口： `entry: './src/index.js'`

出口：

  ouput: {
  	filenname: 'bundle.js',
    path: path.rosolve(__dirname, 'dist'),
    publicPath: 'http://xxx/', // 公共路径,给图片等资源加上公共路径
    library: 'lib', // lib为存储打包后的运行结果返回值的变量
    libraryTarget: 'commonjs' // 输出规范 umd/var/this/commonjs...
  }

模式：mode: 'production/development'

P03 打包结果

P04 html插件

服务器： webpack-dev-serve

   	devServer: { // 开发服务器配置
    	port: 3000,
        progress: true,
        contentBase: './build', // 静态服务器
        open: true // 自动打开浏览器
    }

HtmlWebpackPlugin: 自动注入html

    plugins: [
    	new HtmlWebpackPlugin({
        	template: './src/index.html',
            filename: 'index.html',
            hash: true,
            minify: {
            	removeAttributeQuotes: true,
                collapseWhitespace: true
            }
        })
    ]

P05/P06 样式处理

loader特点： 职责单一，顺序从右向左，从下往上

MiniCssExtractPlugin: 抽离css插件,不于style-loader共存
postcss-loader uto-prefixer: 自动添加前缀

    plugins: [
    	new MiniCssExtractPlugin({
        	filename: 'main.css'
        })
    ]
    
    module:{
      rules: [{ 
          test: /\.css$/,
          use: [
          {
                loader:'style-loader',  // 将css插入html中
                options: {
                    insertAt: 'top'
                }
             },
           MiniCssExtractPlugin.loader,
          'css-loader', // 转化@import('xxx.css') 这种语法
          'postcss-loader',
          'less-loader'
          ]
    ]}

配置postcss postcss.config.js

    module.exports = {
     plugins: [
      require('autoprefixer')
     ]
    }

压缩：
optimize-css-assets-webpack-plugin: 压缩css
uglifyjs-webpack-plugin: 压缩js

    optimization: {
     minimizer: [
     	new OptimizeCssAssetsWebpackPlugin(),
        new UglifyjsWebpackPlugin({
        	cache: true, // 缓存
            paralel: true, // 并发
            sourceMap: true // 源码映射
        })
     ]
    }

P07 es6处理

babel:	babel-loader @babel/core @babel/preset-env
generator:	
	npm i -D @babel/plugin-transform-runtime
    npm i -S @babel/runtime
    npm i -S @babel/polyfill

	import('@babel/polyfill')
    module.rules: [{
    	test: /\.js$/,
        exclude: 'node_module',
        use: {
        	loader: 'babel-loader', 
            options: {
            	presets: {
            		'@babel/preset-env' // es6转化为es5,如箭头函数
            	},
                plugins: [
                	['@babel/plugin-proposal-decorators', { 'legacy': true }],// 处理装饰器
                	['@babel/plugin-proposal-class-properties', { 'loose': true}], // 处理 class A {}
          "@babel/plugin-transform-runtime"  // 处理generator      
                    
                ]
             }
        }
    }]

P08 eslint处理

安装： `cnpm i -D eslint eslint-loader`

    module.rules:[{
    	test: /\.js/,
        use: {
        	loader: 'eslint-loader',
           	options: {
            	 enforce: 'pre' // 强制优先执行 pre/normal/post
            }
        }
    }]

p09 全局变量引入问题

expose-loader 暴露全局loader(实现window.$) 内联loader
* import $ from 'expose-loader?$!jquery'
* module.rules: [{
	test: require.resolve('jquery'),
    use: 'expose-loader?$'
}]
* 模块中注入$, 使用时直接 $()
	plugins: [
    	new webpack.ProvidePlugin({
        	$: 'jquery'
        })
    ]
 * cdn引入jquery, import $ from 'jquery' 时不打包库
 	externals: {
    	jquery: 'jQuery'
    }
    

p10 图片

场景： js/css/html写入图片
1.file-loader: 可处理js引入图片，默认会在内部生成一张图片到bulid下，返回路径
2.css-loader: 会处理css引入图片
3.html-withimg-loader: html引入图片
4.url-loader: 图片转base64

    module.rules: [{
    	test: /\.(png|jpg|gif)/,
        // use: 'file-loader',
        use: {
        	loader: 'url-loader',
            options: {
            	limit: 200*1024, // base64转化界限
                outputPath: '/img/', // 图片输出路径
                publicPath: 'http://xxx.cn' // 仅给图片加公共前缀
            }
        }
    },{
    	test: /\.html/,
        use: 'html-withimg-loader'
    }]

ps: 该专题学习资源来自bilibili-10天搞定webpack