webpack小白入门之，postCSS，autoprefixer，CSS px转rem，静态资源内联【1-5】

时间 2019-11-16

标签 webpack 入门 postcss autoprefixer css rem 静态资源内联 1-5 栏目 CSS 繁體版

原文原文链接

自动清理构建目录

npm install clean-webpack-plugin -D 避免在每次构建的时候，都须要手动清理dist文件。css

在webpack.dev.js中配置以下：html

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 这个地方注意，可能会报错必须用解构的方式
复制代码

plugins下添加以下代码：new CleanWebpackPlugin()执行npm run build 打包构建html5

自动补全css3前缀，autoprefixer

先安装插件：npm i postcss-loader autoprefixer -Dnode

在webpack.prod.js的module中配置以下：react

{
    test: /\.less$/,
    use: [
    // 'style-loader',
    MiniCssExtractPlugin.loader, // MiniCssExtractPlugin是将css代码提取出来，这两个loader不能同时使用。
    'css-loader',
    'less-loader', // 用于解析less
    {
        loader: 'postcss-loader',
        options: {
          plugins: () => [
            require('autoprefixer')({
              browsers: ['last 2 version', '>1%', 'ios 7 ']
            })
          ]
        }
    }
    ]
},
复制代码

移动端CSS px自动转化成rem

安装插件：npm i px2rem-loader -D 到开发环境中，再直接引用npm i lib-flexible -Swebpack

{
    loader: 'px2rem-loader',
    options: {
        remUnit: 75, // 1rem == 75px
        remPrecision: 8 // 当px转换为rem的时候，小数点后面的位数。
    }
}
复制代码

而后将flexble.js 内联进咱们的html中！ios

静态资源内联

资源内联的意义：css3

页面框架的初始化脚本
上报相关打点
css内联避免页面闪动

`raw-loader`内联html

<script>${require('raw-loader!./meta.html')}</script>git

安装 npm i raw-loader@0.5.1 -Dgithub

`raw-loader`内联js

<script>${require('raw-loader!babel-loader!../../node_modules/lib-flexible/flexible.js')}</script>

`css内联`

借助 style-loader
借助 html-inline-css-webpack-plugin

配置以下：

// 'style-loader',
{
  loader: 'style-loader',
    options: {
      insertAt: 'top', // 样式插入到<head>中
      singleton: true // 将全部的style标签合并成一个
    }
},
复制代码

多页面应用（MPA）概念，多页面打包通用方案

动态获取entry和设置html-webpack-plugin数量利用global.sync

安装glob npm i glob -D

在webpack.prod.js文件中配置以下：

const glob = require('glob')
    const setMPA = () => {
    const entry = {}
    const htmlWebpackPlugin = []
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'))
    Object.keys(entryFiles).map(index => {
        const entryFile = entryFiles[index]
        const match = entryFile.match(/src\/(.*)\/index\.js/)
        const pageName = match && match[1]
        entry[pageName] = entryFile
        htmlWebpackPlugin.push(
        new HtmlWebpackPlugin({ // 一般一个html页面用一个HtmlWebpackPlugin，若是有两那就写两个
            template: path.join(__dirname, `src/${pageName}/index.html`), // html模板所在的位置
            filename: `${pageName}.html`, // 指定打包出来的html文件名称
            chunks: [pageName], // chunk名称 指定生成的html要使用哪些chunk
            inject: true, // 是否将打包出来的js或者css将自动注入到index.html中
            minify: {
            html5: true,
            collapseWhitespace: true,
            preserveLineBreaks: false,
            minifyCSS: true,
            minifyJS: true,
            removeComments: false
            }
        })
        )
    })
    return {
        entry,
        htmlWebpackPlugin
    }
}
const { entry, htmlWebpackPlugin } = setMPA()
复制代码

module.exports = {
    entry,
    plugins: [
    new MiniCssExtractPlugin({
        filename: `[name]_[contenthash:8].css`
    }),
    new OptimizeCssAssetsWebpackPlugin({
        assetNameRegExp: /.css$/g,
        cssProcessor: require('cssnano')
    }),
        new CleanWebpackPlugin()
    ].concat(htmlWebpackPlugin)
}    
复制代码

使用source map

做用：经过source map定位到源代码，开发环境开启，线上环境关闭，线上排查问题的时候，能够将问题上传到错误监控系统

sourcemap 关键字

eval 使用eval包裹模块代码
sourcemap 产生.map 文件
cheap 不包含列信息（当代码报错的时候，只显示报错位置所在的行信息）
inline 将.map做为DataURI嵌入，不单独成.map文件
module 包含loader的sourcemap

sourcemap类型

devtool	首次构建	二次构建	是否适合生产环境	能够定位的代码
(none)	+++	+++	yes	最终输出的代码
eval	+++	+++	no	webpack生产的代码(一个个的模块)
cheap-eval-source-map	+	++	no	通过loader转换后的代码（只能看到行）
cheap-module-source-map	o	++	no	源代码（只能看到行）
eval-source-map	--	+	no	源代码
cheap-source-map	+	o	yes	通过loader转换后的代码（只能看到行）
cheap-module-source-map	o	-	yes	源代码（只能看到行）
inline-source-map	+	o	no	通过loader转换后的代码（只能看到行）
inline-cheap-module-source-map	o	-	no	源代码（只能看到行）
source-map	--	--	yes	源代码
inline-source-map	--	--	no	源代码
hidden-source-map	--	--	yes	源代码

提取页面公共资源

先安装： npm i html-webpack-externals-plugin -D

新增react的开发环境的CDN：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
复制代码

一下是react的线上环境的CDN：

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
复制代码

在webpack.prod.js中配置线上环境的CDN：

const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')
复制代码

plugins中：

new HtmlWebpackExternalsPlugin({
  externals: [
    {
      module: 'react',
      entry: 'https://unpkg.com/react@16/umd/react.production.min.js',
      global: 'React'
    },
    {
      module: 'react-dom',
      entry: 'https://unpkg.com/react-dom@16/umd/react-dom.production.min.js',
      global: 'ReactDOM'
    }
  ]
})
复制代码

使用 SplitChunksPlugin分离react和react-dom

optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          name: 'vendors', // 提取出来的技术包的名字
          test: /(react | react - dom)/, // 匹配出须要分离的包
          chunks: 'all', 
        }
      }
    }
},
复制代码

在 new HtmlWebpackPlugin对象参数中加入 chunks: ['vendors', pageName],

使用 SplitChunksPlugin分离页面公共文件

optimization: {
    splitChunks: {
     minSize: 300, // 分离的包的体积的大小，设置成0kb只要引用了，就会打包，假如为1000kb
     cacheGroups: {
        commons: {
         name: 'commons', // 提取出来的包的名字，记得在new HtmlWebpackPlugin中加入chunks: ['commons', pageName],
         chunks: 'all', // 将全部引入的库进行分离;默认是async是将异步引入的库进行分离;inital是将同步引入的库进行分离
         minChunks: 2 // 设置最小引用次数为2次，才会打包出commons.js文件来
        }
     }
    }
},
复制代码

在 new HtmlWebpackPlugin对象参数中加入 chunks: ['commons', pageName],