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

推荐阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 5,675评论 0 16
  • 版权声明:本文为博主原创文章,未经博主允许不得转载。 webpack介绍和使用 一、webpack介绍 1、由来 ...
    it筱竹阅读 8,927评论 0 21
  • 如果把项目开发的过程比作用积木搭房子的过程,Browserify:封装了各种各样的的小积木块,那怎么把这些积...
    shengwenjia阅读 318评论 0 0
  • Webpack学习总结 此文只是自己学习webpack的一些总结,方便自己查阅,阅读不变,非常抱歉!! 下载安装:...
    Lxs_597阅读 715评论 0 0
  • 只是想静静,这是唯一的消遣方式。 静下来思考,却又显得多余。 缺少闲情逸致,又渴慕之极。 争论使人变的面红耳赤, ...
    媚珠阅读 63评论 0 0
  • 在家没有不想吃饭的权利,精神状态不好就要吃药。整个脑袋肿胀疼痛,只想静静地躺在被窝里一动不动,可是被妈妈伺候来伺候...
    少女与野花阅读 58评论 2 0
  • 一年365天,梦里的360天里都是幸福的。喜欢不知道多少年,思念与挂恋互相牵连,若不是断了我的念想,约莫这一辈子我...
    晴日阅读 1,237评论 26 28