webpack4入门教程十分钟上手指南

Webpack 是基于node编写的,可以看作是模块打包机。它所做的是，分析项目结构，找到js模块以及其他一些浏览器不能直接运行的扩展语言（Scss,TS等），并将其打包成为合适的格式以便供浏览器使用。

总之一句话：把入口文件打包成一系列静态资源，供浏览器使用。

用途：

1.代码转换

2.文件优化：压缩合并

3.代码分割：公共模块分离合并，路由懒加载

4.自动刷新

5.代码校验

6.自动发布

练习流程：

--------------------------- 打包初体验 -------------------------

1. 新建文件夹，打开cmd命令行初始化：(出现package.json)

npm install -g yarn (如果之前全局安装过yarn则略过)

　 yarn init -y

2. 安装本地webpack: (出现node_modules, yarn.lock)

　 webpack webpack-cli -D

3. 新建src/index.js入口文件

console.log(\'hello webpack\');　

4. 运行webpack生成dist目录：(出现的dist/main.js是压缩优化后的代码，配置文件中设置mode = ‘development’后则不压缩)

npx webpack

5. 新建src/a.js, 写一些CommonJS(node)语法：

module.exports = \'Edward\'

module.exports输出，然后在src/index.js通过require引入

此时这样是无法在我们浏览器中跑的，因为这是node 的规范

6. 在dist文件夹下,新建index.html,让它直接引用打包后的结果main.js

7. 在浏览器打开发现，通过webpack打包后生成的main.js中的代码可以在浏览器正常运行。

------------------------- 接下来配置webpack ------------------------

8. 新建webpack.config.js 配置文件(由于webpack是node写出来的，所以这个配置文件中要写node的语法)

9. 添加本地服务器：

　 yarn add webpack-dev-server -D

10.运行本地服务器：(同时可选择配置devServer)

npx webpack-dev-server

(或者在package.json中配置脚本：”dev”:”webpack-dev-server”,就可以通过 npm run dev 命令来运行服务)

但是问题来了，我们总不能每次打包完后，在出口文件夹下再手动创建html并引入js文件吧，所以我们要想办法让出口文件夹自动生成一个引入js文件的html文件

11.新建src/index.html 文件作为模板

12.添加html-webpack-plugin插件，下载模块后引入配置文件：

yarn add html-webpack-plugin -D

这样每次打包完成后，在dist出口文件夹下的html文件中都会把打包好的js文件自动引入。

-------------------------- 样式处理 ----------------

13.新建src/a.css

body {
        color: \'green\';
}

新建src/index.css,

@import \'./a.css\';
body {
        background: red;
}

并在src/index.js中通过 require(‘index.css’) 的方式引入,

let str = require(\'./a.js\')

console.log(str)

require(\'./index.css\')

运行后此时命令行报错：need an appropriate loader 需要一个合适的解析器

14.安装css-loader, style-loader, 分别负责： 解析@import这种语法，把css插入到header标签中

yarn add css-loader style-loader -D

yarn add less less-loader -D

15.在配置文件中添加module模块并适配规则：

用到一个loader时，use后为字符串；

用到多个loader时，use后为数组。Loader默认解析顺序为从右到左，loader还可以写成对象的方式，用来添加更多配置。

---------------- es6语法转换 ---------------

16.安装依赖后在配置文件中添加配置规则

　　yarn add babel-loader @babel/core @babel/preset-env -D

　　Yarn add @babel/plugin-proposal-class-properties -D

（未完待续。。。）

【附录】：

// 本配置文件名又可命名为webpackfile.js


let path = require(\'path\'); // webpack内置模块
let HtmlWebpackPlugin = require(\'html-webpack-plugin\');

module.exports = {
    devServer: {
        port: 8080,
        progress:true,
        contentBase: \'./dist1\',
    },
    mode: \'development\', // 默认为 production
    entry: \'./src/index.js\',
    output: {
        filename: \'bundle.js\', // 打包后的文件名，默认为main.js
        path: path.resolve(__dirname,\'dist1\') // 路径必须是一个绝对路径
    },
    plugins:[ // plugins 是个数组，放着各种webpack插件的配置
        new HtmlWebpackPlugin({
            template: \'./src/index.html\', // 以哪个文件作为模板
            filename: \'index.html\' // 打包后html文件的名字
        })    
    ],
    module: {
        rules: [
            {
                test: /\.js$/,
                use: {
                    loader: \'babel-loader\',
                    options: { // 用babel-loader 需要把es6转化为es5
                        presets: [
                            \'@babel/preset-env\' // 转换es6箭头函数等语法
                        ],
                        plugins: [
                            \'@babel/plugin-proposal-class-properties\' // 转化es6的Class类
                        ]
                    }
                }
            },
            {   
                // 处理css文件
                test: /\.css$/,
                use:[
                    {
                        loader: \'style-loader\', // 把css插入到header标签中
                        // options: {
                        //     insertAt: \'top\'
                        // }
                    },
                    \'css-loader\' // 解析@import这种语法
                ]
            },
            { 
                // 处理less文件
                test: /\.less$/,
                use:[
                    {
                        loader: \'style-loader\', // 把css插入到header标签中
                        // options: {
                        //     insertAt: \'top\'
                        // }
                    },
                    \'css-loader\', // 解析@import这种语法
                    \'less-loader\' // 作用：less -> css
                ]
            }
        ]
    }
}