Webpack 打怪升级

2020/10/10 Webpack已经发布版本5了

如何开始学习：官网-指南-起步：https://v4.webpack.docschina.org/guides/getting-started/

初始化： 命令写在终端中

• 初始化package.json文件

npm init -y  

// 结果： {  "name": "demo1",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

• 安装依赖
  webpack要求node.js是10.0以上版本，否则会安装失败，可以去node.js官网下载升级
  如下命令为本地安装，安装后生成node-modules目录，webpack和它的小伙伴cli在文件夹的.bin目录里。并非-g是全局安装
  提醒：安装要很久很久的。。。可以刷刷淘宝

yarn add webpack webpack-cli --dev    //会生成一个yarn.lock文件，准确存储每个安装的依赖是哪个版本，应该被提交到版本控制系统，发布它对库的用户不会有任何影响。
//或
npm install webpack webpack-cli --save-dev
// 结果我的版本：webpack 5.1.3   webpack-cli 4.0.0，可以在webpack和cli后用@指定版本号

• 编译js
  创建src文件夹，，里面写index.js文件后。运行webpack打包
  会生成main.js文件，里面就是index.js文件内容和兼容

 ./node_modules/.bin/webpack 
 // 或
 npx webpack //会自己去找webpack的位置并运行，但不够稳定如果装node的位置有空格会找不到
// 结果：(()=>{"use strict";console.log("xxxx")})();

这一步操作之前可能因为没有设置开发还是生产模式产生warning，但现在没有


- 配置webpack.config.js

• 开发/生产模式

mode: "production"  // "production" | "development" | "none"

• 入口和出口

entry: "./src/testentry.js",
    output: {
        // webpack 如何输出结果的相关选项
        path: path.resolve(__dirname, "dist"), // string
        // 所有输出文件的目标路径
        // 必须是绝对路径（使用 Node.js 的 path 模块）
        '[name].[hash].js' // [name]可以替换成自己想要的如index。加上hash这样会生成带20位数字的编译文件，方便浏览器识别有没有更新，要不要不理缓存，重新去下载
    }

• 清理dist文件
  安装清理插件clean-webpack-plugin

yarn add --dev clean-webpack-plugin
// 或
npm install --save-dev clean-webpack-plugin

再config.js增加命令

const {
    CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
     new CleanWebpackPlugin()
] // npm run build后会删除之前的dist中的旧文件

• 自动生成html文件
  安装html-webpack-plugin插件

yarn add --dev html-webpack-plugin
// 或
npm install --save-dev html-webpack-plugin

再config.js增加命令

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins: [
        new HtmlWebpackPlugin(),//生成默认index.html文件，即可以生成多个的
        new HtmlWebpackPlugin({
   
            title: '管理输出', // 如果自己下面的src里面的html有title，这里的设置会失效
            filename: 'assets/admin.html', // 输出的dist里的路径和文件名
            template: './src/index.html' // 模板html，就用这个啦
        })
// 结果dist生成两个html，一个直接index.html，另一个在assets里的admin.html        

如要使用配置里的title，可以在模板html里修改title如下：

<title><%= htmlWebpackPlugin.options.title %></title>

• 加载CSS
  安装loader，创建css页面并import到js文件中

yarn add --dev style-loader css