手动搭建webpack

webpack打包

①在全局安装webpack、webpack-cli

cnpm i webpack -g
cnpm i webpack-cli -g (4.0+)
cnpm i yarn -g   

②新建项目文件夹，cnpm init -y 初始化

我们需要使用webpack.config.js进行配置

const baseConfig = require("./config/base"); //{entry:,output}
const devConfig = require("./config/dev");  //{mode:"development"}
const prodConfit = require("./config/prod");   //{mode:"production"}

将小的配置项单独拿出来配置（config>base.js、dev.js、prod.js）

在base 中设置webpack入口 出口的配置

const config = {
    //设置被webpack打包的入口文件
    //打包多个文件，写成数组的形式
    entry:{
        main:"./src/main.js",
        vendor:"./src/vendor.js"
    },
    output:{ //设置被webpack打包后的出口文件
        path:__dirname+'/../dist',
        filename:'[name].js' //通过[name]就会通过entry的key来生成多出口文件
    }
}
module.exports = config;

dev、prod 声明模式（开发模式、生产模式）

let config = {
    mode:"production"
}

需求：在开发模式下使用dev，生产模式下使用prod(带hash值)

判断是生产模式还是开发模式：

webpack.config.js 在导出的时候可以返回一个函数，在函数中可以传值，通过传值来判断是开发模式还是生产模式

在控制台中写webpack --env prod 。webpack就可以接收到prod，采用生产模式打包

const baseConfig = require("./config/base"); //{entry:,output}
const devConfig = require("./config/dev");  //{mode:"development"}
const prodConfit = require("./config/prod");   //{mode:"production"}


module.exports = function(env){
    console.log("参数为"+env)
    let config = {}
    if(env==="prod"){//如果为生产环境的打包，就将文件名带上hash值。
        config = {...baseConfig,...prodConfit.config}
        // config.output.filename = "[name]_[hash].js"
        config.output.filename = prodConfit.filename
    }else{
        //否则利用开发模式
        config = {...baseConfig,...devConfig}
    }
    return config;
}

在package.json中“scripts”里设置如下：

执行cnpm start相当于运行dev：“webpack”

"scripts": {
    "dev": "webpack",
    "build": "webpack --env prod",
    "start": "npm run dev"
  }

通过html-webpack-plugin 插件自动生成index.html页面，并将打包好的js代码自动引入

cnpm i html-webpack-plugin -D 

此插件只在开发模式中使用即可，安装好后直接在dev.js中引入并配置

配置

const HtmlWebpackPlugin = require("html-webpack-plugin")//引入
module.exports = {
    mode:"development",
    plugins:[//配置HtmlWebpackPlugin
        new HtmlWebpackPlugin({
            title:"学习react" //在配置项中可设置title
            template:"./src/index.html"//设置默认使用的模板
            minify:{
                ...
            }
        })
    ]
}

在配置项中有minify:{…}配置

传递 html-minifier 选项给 minify 输出，false就是不使用html压缩，minify具体配置参数请点击
其中有若干参数文档

下面使用minify中的collapseWhitespace来压缩html代码

const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    mode:"development",
    plugins:[
        new HtmlWebpackPlugin({
            // title:"学习react"
            template:"./src/index.html",
            minify:{
                collapseWhitespace:true//解决空白字符问题，也就是压缩
            }
        })
    ]
}

要解析css样式文件，要下载css-loader和style-loader两个解析器

cnpm i css-loader style-loader --save-dev

并且要在使用环境dev中配置

module:{
    rules:[
        {test:/\.css$/,use:['style-loader','css-loader']},//use的顺序，从后往前
    ]
}

要解析scss样式文件，要下载css-loader、style-loader、sass-loader、node-sass

cnpm i style-loader -D
cnpm i css-loader -D
cnpm i sass-loader -D
cnpm i node-sass -D

同样要进行配置

module:{
    rules:[
        {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}//use的顺序，从后往前
    ]
}

postcss-loader解析器：加前缀样式兼容

①安装 postcss-loader autoprefixer 两个插件

cnpm install --save-dev postcss-loader autoprefixer 

对post-loader进行配置

//根目录创建postcss.config.js
module.exports = {
    plugins:[
        require("autoprefixer")
    ]
}
//loader配置
use: ['style-loader','css-loader',{
        loader: 'postcss-loader',
        options: {
            config: {
                path: 'postcss.config.js'  // 这个得在项目根目录创建此文件
            }
        }
        },'sass-loader']
//package.json上面添加
"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

个人笔记