vue + webpack 构建项目配置文件小记

最新推荐文章于 2024-07-16 16:20:26 发布

mht1829

最新推荐文章于 2024-07-16 16:20:26 发布

阅读量376

点赞数 1

分类专栏： vue 文章标签： vue webpack

本文链接：https://blog.csdn.net/mht1829/article/details/78887948

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/main.js',
    output: {
        path: './dist',// 打包后的文件存放的地方  
        publicPath: '/dist/',
//      filename: '[name].bundle.[chunkhash:8].js'
// 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
        filename: '[name].bundle.js'// 打包后输出文件的文件名  
    },
    module: {
        loaders: [{
            test: /\.js$/,//一个匹配loaders所处理的文件的拓展名的正则表达式
            loader: 'babel-loader',//loader的名称
            exclude: /node_modules/,//include/exclude手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
            query: {
                presets: ['es2015']
            }//为loaders提供额外的设置选项,解析Es6的babel-preset-es2015包
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
            //感叹号的作用在于使同一文件能够使用不同类型的loader。
        }, {
            test: /\.vue$/,
            loader: 'vue'
        }, {
            test: /\.scss$/,
            loader: 'style!css!sass?sourceMap'
        }
        ]
    },
    resolve: {
        extensions: ['', '.js', '.vue', '.css'],
        alias: {
            'vue$': 'vue/dist/vue.js'
         }
    },
    //HtmlWebpackPlugin会自动帮你生成一个 html 文件，并且引用相关的 assets 文件(如 css,  bundle.js)。
    plugins: [new HtmlWebpackPlugin({

        // title: '乐其OMS管理系统',//生成的html文档的标题。配置该项，它并不会替换指定模板文件中的title元素的内容
        template: './index_template.html',//本地模板文件的位置
        filename: '../index.html', 
//输出文件的文件名称，默认为index.html，不配置就是该文件名；filename配置的html文件目录是相对于webpackConfig.output.path路径而言的，不是相对于当前项目目录结构的。
        showErrors: true,
        //是否将错误信息输出到html页面中。这个很有用，在生成html文件的过程中有错误信息，输出到页面就能看到错误相关信息便于调试。
        inject: 'body',
// inject：向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。

// 1、true或者body：所有JavaScript资源插入到body元素的底部
// 2、head: 所有JavaScript资源插入到head元素中
// 3、false： 所有静态资源css和JavaScript都不会注入到模板文件中
        complile: true,
        chunks: 'all',
    })]
};

webpack 代码分割 - 使用 require.ensure
webpack 在编译时，会静态地解析代码中的require.ensure()，同时将模块添加到一个分开的 chunk 当中。这个新的 chunk 会被 webpack 通过 jsonp 来按需加载。

require.ensure(dependencies: String[], callback: function(require), chunkName: String)
const configTags = r => require.ensure([], () => r(require('./view/goodsManage/configTags')), 'goods')

npm install webpack --save-dev
简单的写法：-_-,缩写形式
npm i webpack -D
–save：模块名将被添加到dependencies，可以简化为参数-S。
–save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。