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
                ]
            }
        ]
    }
}