Webpack打包工具

webpack文档、webpack优质文章

webpack打包工具，基于node环境。将CSS、Sass、Less、TypeScript等语言，编译、组合、压缩成为JS文件(由于webpack 自身只理解 JavaScript)。

1. 安装webpack：npm i webpack webpack-cli -g、npm init -y、npm i webpack webpack-cli -D

2. 重要概念：1.entry入口、2.output出口、3.mode模式、4.loader模块处理、5.plugins插件

3. webpack.config.js基本配置，可打包JS文件，代码如下：

|-- demo
    |-- dist
        |--bundle.js   打包文件
    |--src
        |--demo.js
        |--index.js    入口文件(import './demo.js')
    |--webpack.config.js


const path = require('path');

module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.js"
    },
    mode:"development"
}

// __dirname，输入指令“webpack”，相当于"webpack ./src/index.js -o ./dist/bundle.js --mode=development"

4. webpack打包处理css样式文件，借助style-loader、css-loader，webpack.config.js配置如下：
   • webpack > loader > test 属性 ，用于标识处理那种类型的文件
   • webpack > loader > user 属性 ，注意！当中所执行的loader，从下而上，逆序执行。
   • 依赖：npm i webpack webpack-cli style-loader css-loader -D

|-- demo
    |-- dist
        |--bundle.js   打包文件
    |--src
        |--demo.css
        |--index.js    入口文件(import './demo.css')
    |--webpack.config.js


const path = require('path');

module.exports = {
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[   // use当中的loader从下至上，逆序执行。
                    'style-loader',// 将打包后js文件当中的css部分插入style标签
                    'css-loader',  // 将css转换成为js
                ]
            }
        ]
    },
    mode:"development"
}

5. webpack打包自动生成index.html，借助html-webpack-plugin插件，配置如下：
   • 依赖：npm i webpack webpack-cli html-webpack-pligin -D

|-- demo
    |-- dist
        |--bundle.js   打包文件
        |--index.html
    |--src
        |--index.js    入口文件
    |--webpack.config.js
    |--index.html      参照对象


let path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    plugins:[
        new HtmlWebpackPlugin({
            template: './index.html' // 参照对象
        })
    ],
    mode:'development'
}

6. url-loader将文件转成base64URL，替代file-loader处理图片文件。配置如下：
   • 依赖：npm i webpack webpack-cli html-webpack-plugin html-loader url-loader -D

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

module.exports = {
    entry:'./src/index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.(png|jpg|gif)$/i,
                loader:'url-loader',
                options:{
                    limit: 6 * 1024,    // 当图片小于6k的时候，将图片转成base64字符串，减少请求，但是项目体积会增加。
                    esModule:false, // webpack基于node，使用CommonJS语法，所以，关闭ES语法，避免冲突
                    name:'[hash:10].[ext]', // 截取hash的前10位作为扩展名
                }
            },
            {
                test:/\.html$/,
                loader: 'html-loader'   // 将html导出为字符串(打包出来的html，可以直接打包后的文件)
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./index.html'
        })
    ],
    mode:'development'
}

7. webpack-dev-server热更新。配置如下：

• 依赖：npm i webpack webpack-cli html-webpack-plugin -D、npm i webpack-dev-server -g

|-- demo
    |-- dist
        |--bundle.js   打包文件
        |--index.html
    |--src
        |--index.js    入口文件
    |--webpack.config.js
    |--index.html      参照对象


const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js'
    },
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), // 项目构建路径
        port:3000, // 端口号，http://localhost:3000/
        open:true,  // 自动打开
        compress:true,  // 压缩
    },
    plugins: [
        new htmlWebpackPlugin({
            template:'./index.html'
        }),
      ],
    mode:"development"
}