一、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(配置模块如何解析)
尝试按顺序解析这些后缀名。如果有多个文件有相同的名字,但后缀名不同,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" }) ] }
相关资料