【vue】npm run dev 执行了什么

一、vue项目目录图

二、npm run dev 运行图

资料：vue-cli webpack项目npm run dev启动过程 

三、webpack常用配置解析

1、entry（入口对象是用于 webpack 查找开始构建 bundle 的地方）

2、output（打包后的文件信息）

3、devtool

选择一种 source map 风格来增强调试过程。不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

devtool: '#cheap-source-map',

devtool: isProd ? 'hidden-source-map' : 'cheap-module-eval-source-map',

4、Mode(模式)

意：开发环境

development

production【默认值】

none

module.exports = {
  mode: 'development',
};

5、Resolve(配置模块如何解析)

• extensions

尝试按顺序解析这些后缀名。如果有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。

• modules(告诉 webpack 解析模块时应该搜索的目录)
• alias(别名)

6、Module(这些选项决定了如何处理项目中的不同类型的模块。)

• noParse(不去解析属性值代表的库的依赖) 

 例：

module:{
    noParse:/jquery/,//不去解析jquery中的依赖库
}

• rules(webpack的loader配置在此)
• Performance（配置如何展示性能提示）
• plugins（webpack插件）

 demo:

module.exports = {
　 mode: 'development',
    entry: {
        app: ['babel-polyfill', './src/main.js']
    },
    output: {
       path: path.resolve(__dirname, 'dist'),
       filename: 'foo.bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            'src': path.resolve(__dirname, '../src'),
        
        }
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader?cacheDirectory',
                include: [resolve('src'), resolve('test')]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery"
        })
    ]
   
}

 

 相关资料

• webpack开发和生产两个环境的配置详解
• webpack 教程资源收集