一周精通Vue(四)webpack-Plugin

简介:

webpack-Plugin

  • 版权plugin
plugins: [
            new webpack.BannerPlugin("author: 清水云")
        ]
  • html-webpack-plugin
# 配置打包HTML文件
# 安装插件
npm install html-webpack-plugin --save-dev

# 配置plugin
    plugins: [
        new webpack.BannerPlugin("author: 清水云"),
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
  • uglifyjs-webpack-plugin
# 安装插件  
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

    plugins: [
        new webpack.BannerPlugin("author: 清水云"),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
        new UglifyjsWebpackPlugin()
    ]
# 配置后打包可以将打包后的js压缩
  • webpack-dev-server
# 安装插件 内存打包 页面实时监听刷新 
npm install --save-dev webpack-dev-server@2.9.3 

# 配置插件

     // 开发内存实时加载文件服务
     devServer: {
         // 服务于那个文件件
         contentBase: './dist',
         // 实时监听
         inline: true,
         // 指定端口
         port: 23333,
     }
通过命令 启动
npm run dev

    "dev": "webpack-dev-server --open"
  • webpack-merge
安装  可以合并配置config.js文件
npm install webpack-merge
  • 配置文件分离与merge

    把 webpack.config.js改成三个文件
    
// file: base.config.js

const path = require('path');

module.exports = {
    // 打包入口文件
    entry: './src/main.js',
    // 出口文件
    output: {
        // 出口文件绝对路径
        path: path.resolve(__dirname, '../dist'),
        // 打包后的文件名字
        filename: 'bundle.js',
        // 打包时动态修改文件加载地址
        // publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                // css-loader 只负责将css文件加载
                // style-loader 负责将样式添加到dom中
                // 这里配置顺序需要注意 是从后向前加载的
                use: ['style-loader', 'css-loader'],
            },

            {
                test: /\.less$/,
                use: [
                    {
                        loader: "style-loader" // creates style nodes from JS strings
                    },

                    {
                        loader: "css-loader" // translates CSS into CommonJS
                    },

                    {
                        loader: "less-loader" // compiles Less to CSS
                    }
                ]
            },

            {
                test: /\.(png|jpg|gif|jpeg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            // 当加载图片时  文件大小 小于limit时 会将图片编译成base64字符串形式
                            // 当加载图片时  文件大小 大于limit时 需要使用file-loader模块进行加载
                            limit: 9999,
                            // 打包后文件的命名规则
                            // [name] 文件打包前的名字
                            // [hash:8] 截取8位hash值
                            // [ext] 扩展名
                            name: 'img/[name].[hash:8].[ext]'
                        },

                    }
                ]
            },

            {
                test: /\.js$/,
                // exclude 转换的时候排除的内容
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },

            {
                test: /\.vue$/,
                // vueloader
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        alias: {
            // 指定 在其他地方导入vue的时候 vue来自哪里
            // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js
            'vue$': 'vue/dist/vue.esm.js'
        }
    },

};
// file:dev.config.js
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

// 合并配置文件
module.exports = WebpackMerge(baseConfig, {
    // 开发内存实时加载文件服务
    devServer: {
        // 服务于那个文件件
        contentBase: './dist',
        // 实时监听
        inline: true,
        // 指定端口
        port: 23333,
    }
});
// file: prod.config.js
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge');
const baseConfig = require('./base.config');

// 合并配置文件
module.exports = WebpackMerge(baseConfig, {
    plugins: [
        new UglifyjsWebpackPlugin()
    ],
});

最后在package.json 中指定加载配置文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
相关文章
|
8月前
|
JavaScript 测试技术
Webpack - Vue 配置开发环境与正式环境
Webpack - Vue 配置开发环境与正式环境
96 1
|
9月前
|
缓存 JSON 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 7
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
452 0
|
9月前
|
缓存 JavaScript 前端开发
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新 2
2023年最新前端面试题汇总大全二(含答案超详细,Vue,TypeScript,React,微信小程序,Webpack 汇总篇)-- 持续更新
260 0
|
8天前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
6月前
|
前端开发 JavaScript
探寻webpack打包vue前端项目的过程和出现的问题
前端 vue2 项目中,多人开发,从一段时间开始发现打包变得特别慢,每次线上更新也至少要10几20分钟,正常项目线上更新一般也就1、2分钟,新需求开发拉新分支本地运行也要至少5、6分钟才能运行的起来
66 1
|
6月前
|
移动开发 JSON 自然语言处理
Vue系列教程(16)- 模块打包器(webpack)
Vue系列教程(16)- 模块打包器(webpack)
51 0
|
7月前
|
JavaScript 前端开发
vue webpack/vite的区别
vue webpack/vite的区别
71 0
|
7月前
|
JavaScript 测试技术 Shell
[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目
[笔记]vue从入门到入坟《五》vue-cli构建vue webpack项目
|
8月前
|
JavaScript 前端开发
vue+webpack项目动态设置页面title的方法
vue+webpack项目动态设置页面title的方法
|
9月前
|
JavaScript 前端开发 API
Vue+Webpack+css预处理开发单页应用
Vue+Webpack+css预处理开发单页应用
70 0
Vue+Webpack+css预处理开发单页应用