Vue——webpack打包

首先创建Vue项目

vue init webpack <项目名称>进入交互

1. 输入项目名称

2. 项目描述

3. 作者名称

4. 选择vue的编译模式 默认选择第一种模式

5. 选择是否安装vue的路由 

6. 是否启用eslint 检测你的代码 

7. 启用tests （用来做单元测试的）

8. 启用e2e （用来做单元测试的）

9. 选择用yarn 还是npm 来安装依赖

     进入到项目文件夹

1、全局安装完webpack（npm i webpack -g）以及 webpack-cli （npm i webpack-cli -g）之后，使用npm局部安装webpack（npm i webpack），因为解析 vue 文件需要使用局部的 webpack

    使用babel把ES6转换成ES5，需要安装@babel/core（7.0.0）和babel-loader（8）以及@babel/preset-env（7.0.0）模块,版本要配对，不然无法使用

const path=require('path')
module.exports={
    //单文件编译模式
    entry:'./src/main.js',
    output:{
        path:path.resolve('dist'), //必须为绝对路径
        filename:'bundle.js',
        library:'interface' //暴露全局接口，可以通过 interface 来访问编译后文件中的导出对象
    },

    //多文件编译模式
    //entry:{
    //    main:'./src/main.js',
    //    index:'./src/index.js'
    //    },
    //output:{
    //    path:path.resolve('dist'), //必须为绝对路径
    //    filename:'[name].js'//通过name属性生成多个js文件
    //},
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {//使用babel把ES6转换成ES5
                test: /\.js$/, 
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env"
                        ]
                    }
                },
                include:[path.resolve('src','main.js')],//需要额外的文件
                exclude:[path.resolve('src','index.js')],//不需要打包的文件
            },

        ],
    }
}

2、创建在webpack.config.js文件，设置打包规则，安装vue-loader模块以及vue-template-compiler模块（npm i vue-loader vue-template-compiler -D）

3、从vue-loader模块中引入VueLoaderPlugin插件（用来解析vue文件），并在module.exports中的plugins属性中创建一个VueLoaderPlugin实例

const {VueLoaderPlugin}=require('vue-loader')
module.exports={
    ....，
    plugins:[ //插件
            new VueLoaderPlugin()
    ]
}

4、解析模块请求选项

const {VueLoaderPlugin}=require('vue-loader')
module.exports={
    ....，
   resolve: { // 解析模块请求的选项
        extensions: ['.vue','.js'], // 自动匹配文件后缀规则
        alias: { // 用来给模块添加别名路径的
            'vue': 'vue/dist/vue.esm', //给vue取一个别名
            '@': path.resolve('src','assets'),
            // 'babel-core': path.join(__dirname,'node_modules','@babel','core')
        }
    },
}

5、设置生成的js文件模式  production模式，会去掉注释以及打印消息

const {VueLoaderPlugin}=require('vue-loader')
module.exports={
    ....，
    mode: 'production' // production development
}

6、热更新模块webpack-dev-server （npm i -g webpack-dev-server），如果没有安装 webpack-dev-server 模块，可以使用webpack -w ，安装了 webpack-dev-server 模块之后，使用 webpack-dev-server 命令即可

const {VueLoaderPlugin}=require('vue-loader')
const HtmlWebpackPlugin = require('html-webpack-plugin')  //该模块不会生成js文件，不需要在index.html文件中引入webpack生成的JS文件，模块会自动把代码加到html文件中

module.exports={
    ....，
    devServer: { //webpack-dev-server的配置
        contentBase: path.resolve('dist'), // 生成后的文件所在的目录
        compress: true, //gzip压缩
        // host: '127.0.0.1',
        port: 4000,     // 服务器端口号
        index: 'index.html', // http服务默认加载的html文件名称
        open: true // 在webpack-dev-server启动时默认自动打开浏览器
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            // 使用HtmlWebpackPlugin 可以不用在html中引入打包后的文件，直接生成文件到内存中，网页加载的时候也是从内存读取
            template: path.resolve('index.html') //html文件模板，把开发的index.html放在根目录，因为不需要导入js文件，所以跟生产的html文件不一样
        })
    ],
}

配置了 webpack-dev-server 之后，开发的时候可以使用 webpack-dev-server 进行编译，生产的时候必须使用 webpack 进行编译，因为 webpack-dev-server 编译不会生成文件

整个webpack.config.js文件

// webpack 运行是在node里运行 es6的语法是不能支持

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

module.exports = {
    entry: { // 多文件编译是对象的格式 单文件编译是 字符串和数组
        app: './src/main.js',
        index: './src/index.js'
    }, //程序打包入口
    output: { // 打包好的文件怎么输出
        path:path.resolve('dist'),  //配置 输出的具体目录（必须是绝对路径）
        filename: '[name].js', // 定义你打包的文件叫啥
        // library: 'lemon', // 暴露全局变量 在浏览器里
        // libraryTarget: 'umd2' // umd 通用的模块
    },
    module: { // 模块处理
        rules: [ // 模块处理规则
            {
                test: /\.js/, 
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env"
                        ]
                    }
                }
            },
            {
                test: /\.css$/, //正则
                loader: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                loader: ['style-loader', 'css-loader', 'less-loader'],
                //include: [], // 需要的
                //exclude: [path.resolve('src','style.less')], // 不需要的
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }, 
    resolve: { // 解析模块请求的选项
        extensions: ['.vue','.js'], // 自动匹配文件后缀规则
        alias: { // 用来给模块添加别名路径的
            'vue': 'vue/dist/vue.esm', //给vue取一个别名
            '@': path.resolve('src','assets'),
            // 'babel-core': path.join(__dirname,'node_modules','@babel','core')
        }
    },
    devServer: { //webpack-dev-server的配置
        contentBase: path.resolve('dist'), // 生成后的文件所在的目录
        compress: true, //gzip压缩
        // host: '127.0.0.1',
        port: 4000,     // 服务器端口号
        index: 'index.html', // http服务默认加载的html文件名称
        open: true // 在webpack-dev-server启动时默认打开浏览器
    },
    plugins: [
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            // 使用HtmlWebpackPlugin 可以不用打包出文件，直接生成文件到内存中，网页加载的时候也是从内存读取
            template: path.resolve('index.html') //html文件模板
        })
    ],
    mode: 'production' // production development
}
// development 开发模式
// 开发模式会保留注释 控制台输出
// production 生产模式
// 生产模式不会保留任何注释 而且 控制台输出也会被清除掉