从0创建一个webpack 5项目

目标

• 新建一个webpack5的项目
• 本地自动刷新
• 根据html模板，编译和打包不同内容

知识点脑图

脑图上关于eslint的部分，后面讲babel再加上。其他的几点详细说明如下：

项目中用到的代码

github.com/joychenke/w…

新建一个webpack项目

• yarn init 初始化webpack项目 webpack-demos，文件夹下会生成一个package.json文件
• 新增 webpack webpack-cli依赖。 yarn add webpack webpack-cli -D
• 根目录下新增src目录，src下新增打包的入口文件index.js，name.js
• 在index.js和name.js中写入以下代码

const myName = require('./name.js')
console.log(myName)

module.exports = "xiaokekeke"

• 使用npx webpack命令，打包项目。此时根目录下会新增一个dist目录，目录里面有个main.js文件。打开main.js 会发现，这是打包和压缩过的js文件
• 在根目录下新增一个index.html文件。此文件引入dist下的main.js
• 在浏览器中访问 index.html文件。会发现控制台有name.js打印的内容

修改webpack的默认配置

• 在根目录下新增一个webpack.config.js文件
• 在webpack.config.js中修改mode，entry，output等属性，如下面的配置

const path = require('path')

module.exports = {
    // 生产模式打包
    mode: 'production',
    // 入口文件是src下的index.js
    entry: './src/index.js',
    // 打包生成的文件是index.js, 它放在当前目录的adviser目录下
    output: {
        filename: 'index.js',
        // path是绝对路径
        path: path.resolve(__dirname, 'adviser')
    }
}

指定webpack配置文件

• 根目录下新建一个webpack.config.joy.js
• npx webpack --config webpack.config.joy.js 指定webpack当前的配置文件是webpack.config.joy.js

自定义脚本命令

• 在package.json中添加自定义脚本
• 添加scripts属性，设置如下：

"scripts": {
    "build": "webpack --config webpack.config.joy.js"
  },

安装webpack-dev-server

• 开发服务器的作用
• 添加开发服务器 yarn add  webpack-dev-server -D
• 在scripts中配置开发服务器

  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.config.joy.js"
  },

• 配置开发服务器的端口、自动打开、热更新、启动压缩 等。webpack5的deServer支持哪些属性，可以随便写个属性，然后看看terminal中的报错信息

    devServer: {
        port: 3000,
        open: true,
        hot: true,
        compress: true
    }

安装 html-webpack-plugin

• 安装插件  yarn add html-webpack-plugin -D
• 配置插件：配置dev环境下，显示的html的模板

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

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

• webpack-dev-server会对当前项目进行打包编译，将生成的js文件引入到模板index.html中，index.html 放到内存中，然后起一个本地服务。开发在本地访问的index.html文件，就是这个内存中的index.html.

今天关于webpack5的介绍就到这里了，后面会继续更新webpack5编译和打包css文件。