手动搭建webpack4框架（二）

手动搭建webpack4框架（二）

配置 vue

• 执行命令 npm install vue vue-loader vue-router vue-template-compiler
• vue是运行时依赖，所以webpack需要合适的loader将vue文件解析为webpack可以理解的格式，就需要安装依赖vue-loader
• vue需要三个部分包括template、script、style；其中template部分需要专用的插件进行转换，即vue-template-compiler
• vue-router用来解析路由模块
• 在webpack.config.js文件中做解析.vue文件的配置

 module: { //配置第三方 loader
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 css 文件的 loader
            { test: /\.(png|jpg|jpeg|svg|gif)$/, use: ['file-loader'] }, //处理 图片的 loader
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, //处理 字体的 loader
            { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, //处理 sass 文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 less 文件的 loader
            { test: /\.vue$/, use: ['vue-loader'] }, //处理 .vue 文件的 loader
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ //用 babel-loader 把 es6 转化成 es5
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /node_modules/
            }, //处理 ES6 的 loader
        ]
    },

注：使用vue-loader的时候必须在webpack.config.js文件中做相关配置，否则会报错

const VueLoaderPlugin = require(‘vue-loader/lib/plugin’);

然后在plugins数组下new 一下VueLoaderPlugin

plugins: [ //配置插件

​ new VueLoaderPlugin(), //webpack4配置中启用 vue-loader 必须启用 否则会报错

​ ],

使用多个配置

• 开发的时候我们希望打包速度快，有源代码提示，有更新；但是发布的时候希望输出的内容不会被缓存，有代码压缩等；这时就需要我们使用多个配置
• 使用多个配置需要webpack-merge插件；即安装命令：npm install --save-dev webpack-merge
• webpack.common.js 这个用来配置webpack的基本信息，被其他配置文件依赖

//使用多个配置
//这个文件被其他配置文件依赖
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //实现 文件的自动打包和引入
const CleanWebpackPlugin = require('clean-webpack-plugin'); //清除缓存中上一次打包的不用的文件
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = {
    entry: {
        app: './src/index.js' //配置入口文件
    },
    output: { //配置出口文件
        filename: '[name].bundle.js', //配置输出文件名字的格式
        path: path.join(__dirname, './dist') //输出的绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({
            template: './index.html', //指定模板 html 文件
            filename: 'index.html' //输出的 HTML 文件名称
        }),
        new CleanWebpackPlugin({ dry: true }), //清除缓存中上一次打包的不用的文件
        new webpack.HotModuleReplacementPlugin(), //热更新所需插件
        new webpack.NamedModulesPlugin(), //热更新所需插件
        new VueLoaderPlugin(), //webpack4配置中启用 vue-loader 必须启用 否则会报错
    ],
    resolve: { //给 vue 配置别名，import 引入 不用写易长串
        alias: {

        }
    }
}

• webpack.dev.js开发配置

//定义开发配置
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
    mode: 'development', //不压缩代码，加快编译速度
    devtool: 'source-map', //提供源码映射文件调试使用
    devServer: {
        contentBase: './dist',
        port: 3000, //本地服务器端口号
        hot: true, //热加载
    },
    optimization: { //解决打包多份 vue 文件的情况；单独提取 vue , 实现代码分离
        splitChunks: {
            chunks: 'initial' //initial(初始块)、async(按需加载块)、all(全部快)
        }
    },
    module: { //配置第三方 loader
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 css 文件的 loader
            { test: /\.(png|jpg|jpeg|svg|gif)$/, use: ['file-loader'] }, //处理 图片的 loader
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, //处理 字体的 loader
            { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, //处理 sass 文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 less 文件的 loader
            { test: /\.vue$/, use: ['vue-loader'] }, //处理 .vue 文件的 loader
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [ //用 babel-loader 把 es6 转化成 es5
                            '@babel/preset-env'
                        ],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /node_modules/
            }, //处理 ES6 的 loader
            /*  { //校验js代码是否符合规范   loader 默认是从右向左  从上到下 执行
                 test: /\.js$/,
                 use: {
                     loader: 'eslint-loader',
                     options: {
                         enforce: 'pre'
                     }
                 }
             } */
        ]
    },

})

• webpack.prod.js生产配置

//定义生产配置
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); //压缩 css 文件
module.exports = merge(common, {
    mode: 'production', //压缩代码
    module: { //配置第三方 loader
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }, //处理 css 文件的 loader
            { test: /\.(png|jpg|jpeg|svg|gif)$/, use: ['file-loader'] }, //处理 图片的 loader
            { test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader'] }, //处理 字体的 loader
            { test: /\.scss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, //处理 sass 文件的 loader
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, //处理 less 文件的 loader
            { test: /\.vue$/, use: ['vue-loader'] }, //处理 .vue 文件的 loader
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel-preset-env'],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', { "legacy": true }],
                            ['@babel/plugin-proposal-class-properties', { "loose": true }],
                            "@babel/plugin-transform-runtime"
                        ]
                    }
                },
                exclude: /node_modules/
            }, //处理 ES6 的 loader
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({ //压缩 css 文件
            filename: 'style.css'
        })
    ]
})

• 配置package.json中的快捷方式

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --open --config webpack.dev.js"
  },

使用多个配置就可以把原先的webpack.config.js配置文件删除了

注：同时在webpack.prod.js中做一些跨域配置，不过在后台解决跨域问题，比在前台解决跨域问题跟简单哦。有关前台解决跨域问题可以看以下文章：https://segmentfault.com/a/1190000011715088?utm_source=tag-newest

• 项目的相关目录