webpack深入

output

[name],[hash],[chunkhash]
[name]-[hash].js
可是每次打包的名字不一样，怎么在index.html中引用呢？
引入webpack的插件：html-webpack-plugin
在webpack.config.js中引用

var htmlWebpackPlugin = require('html-webpack-plugin');
在插件属性中进行初始化：
plugin:[
  new htmlWebpackPlugin()
]

自动生成html，当然还要将相关联的index.html根目录的index.html相关联，修改webpack.config.js

plugin:[
  new htmlWebpackPlugin({
    template:'index.html'
  })
]
还可以head title filename

context运行环境的上下文，上下文就是根目录

清空dist目录
npm install -D clean-webpack-plugin
const CleanWebpackPlugin = require('clean-webpack-plugin');

new CleanWebpackPlugin(['dist']), // 清空项目根目录下dist
        new CleanWebpackPlugin(['dist/images', 'dist/style']),
        new CleanWebpackPlugin(['dist'], {
            root: cdnDir // 指定根目录 清空cdn目录下的dist
        }),

loader

处理less和css等非js资源，需要安装相对应的loader

npm install -D css-loader # 负责处理其中的@import和url()
npm install -D style-loader # 负责内联

npm install -D less less-loader # less编译，处理less文件

module: {
        rules: [
            {
                test: /\.css$/,
                // 从右到左，loader安装后无需引入可直接使用
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: [
                    {loader: 'style-loader'},
                    {loader: 'css-loader'},
                    {loader: 'less-loader'}
                ]
            }
        ]
    }

file-loader图片

# es6语法转义到es5 参考: https://webpack.js.org/loaders/babel-loader/
npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime --save
# 使用垫脚片polyfill, 将es6的api实现出来 参考: https://babeljs.io/docs/usage/polyfill/
npm install --save babel-polyfill

服务器

devServer: {
        // 设置虚拟目录所在位置
        // contentBase: './dist'
        contentBase: path.join(__dirname, "./"),
        // 自动压缩输出的文件
        compress: true,
        // 测试端口为 9000
        port: 9000,
        // 热更新组件
        hot: true
    },

// 单独 加载使用第三方包

    externals: {
        jquery: 'jQuery',
        vue: 'Vue'
    }

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');

module.exports = {

    // 设置垫脚片,设置js入口
    entry: ['babel-polyfill', './src/index.js'],
    // 使用开发服务器, 将服务运行在dist目录中(其实是虚拟于内存中的)
    // 为了解决第三方包的路径问题, 我们将'./dist'改为'./'
    devServer: {
        // 设置虚拟目录所在位置
        // contentBase: './dist'
        contentBase: path.join(__dirname, "./"),
        // 自动压缩输出的文件
        compress: true,
        // 测试端口为 9000
        port: 9000,
        // 热更新组件
        hot: true
    },
    // 解决index.html输出到dist的问题
    plugins: [
        new HtmlWebpackPlugin({
            title: "主页",
            template: "./page.html"
        }),
        new VueLoaderPlugin(),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()
    ],
    // 单独 加载使用第三方包
    externals: {
        jquery: 'jQuery',
        vue: 'Vue'
    },
    // 设置 js 输出位置
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            // 解决加载css资源
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            // 解决加载图片资源
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    'file-loader'
                ]
            },
            // 解决加载 less资源
            {
                test: /\.less$/,
                use: [{
                    loader: 'style-loader' // 3. 通过js 以内联样式 插入到页面中
                }, {
                    loader: 'css-loader' // 2. 把css 转化到 js
                }, {
                    loader: 'less-loader' // 1. 把less编译成css
                }]
            },
            // 解决es6转为es5
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                    }
                }
            },
            // 支持vue的加载
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
};

https://segmentfault.com/a/1190000006178770
https://cloud.tencent.com/developer/article/1148463
https://blog.csdn.net/fengmin_w/article/details/81984514