webpack理解

---

title: webpack

一个前端资源加载/打包工具

安装

yarn add webpack --dev
npm install webpack --save-dev

处理文件

html ==> html-webpack-plugin, html单独打包成文件
脚本  ==> babel + babel-preset-react(es6)
样式  ==> css-loader + sass/less-loader
图片/字体  ==> url-loader + file-loader

extract-text-webpack-plugin 样式打包成单独文件
CommonsChunkPlugin 提出通用模块
webpack-dev-server 为webpack项目提供web服务 + 更改代码自动刷新 + 路径转发

配置

创建一个配置文件webpack.config.js

创建入口文件夹

src
    app.js

输出

const path = require('path')
module.exports = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'dist'), // 生成打包目录
        filename: 'app.js'
    }
}

配置html

安卓html-webpack-plugin
yarn add html-webpack-plugin --dev

在刚才的config里面引入
const HtmlWebpackPlugin = require('html-webpack-plugin')

在output下面加入
plugins: [
    new HtmlWebpackPlugin({
        // 这里存放配置项（其他配置可按照需求去官网搜索）
        template: './src/index.html'
        // 给打包生成的html设置一个模版，也可以不设置，则自动生成html，会自动引入出口的js文件
    })
]

配置es6脚本

安装babel-core / babel-preset-env / babel-loader
yarn add babel-core babel-preset-env babel-loader --dev

在output下加一个module对象
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /(node_modules)/, //排除（）内的文件夹
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        }
    ]
}