标签：const 21 require 分离 loader webpack js config

配置分离

安装

npm install webpack-merge@4.1.5

分离

在项目下创建build文件夹，建立3个js文件，对应base、dev和prod。

删除原来的web.config.js

base.config.js

const path=require('path');
const webpack=require('webpack');
const HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports= {
 entry: './src/main.js',
 output: {
   //绝对路径
   path:path.resolve(__dirname,'dist'),
   filename:'bundle.js',
   //图片打包到这里了，所以需要更改路径 使用HTML打包后不需要这个了
   // publicPath:'dist/'
 },
 module:{
   rules:[
     {
       //正则表达式
       test: /\.css$/,
       //css-loader只负责将css文件进行加载
       //style-loader负责将样式添加到DOM中
       //使用多个loader中，是从右向左的
       use:['style-loader','css-loader']
     },
     {
       test:/\.(png|jpg|jpeg|gif)$/,
       use:[
         {
           loader:'url-loader',
           options:{
             //当加载的图片，小于limit时，会将图片编译成base64字符串格式
             //大于limit时，需要使用file-loader  只需要安装  不用配置
             limit:81920,
             //图片命名
             name:'img/[name].[hash:8].[ext]'
           }
         }
       ]
     },
     {
       test:/\.js$/,
       //exclude 排除
       //include 包含
       exclude:/(node_modules|bower_components)/,
       use:{
         loader:'babel-loader',
         options:{
           presets:['es2015']
         }
       }
     },
     {
       test:/\.vue$/,
       use:['vue-loader']
     }
   ]

 },
 resolve:{
   //alias:别名
   //省略后缀名
   extensions:['.js','.css','.vue'],
   alias:{
     'vue$':'vue/dist/vue.esm.js'
   }
 },
 plugins:[
   new webpack.BannerPlugin('最终版权归我所有'),
   new HtmlWebpackPlugin({
     template:'index.html'
   }),
 ],
};

dev.config.js

const baseConfig=require('./base.config');
const webpackMerge=require('webpack-merge');
module.exports=webpackMerge(baseConfig,{
 devServer:{
   contentBase:'./dist',
   //是否实时监听
   inline:true,
   // port
 }
});

prod.config.js

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const webpackMerge=require('webpack-merge');
const baseConfig=require('./base.config');
module.exports=webpackMerge(baseConfig,{
 plugins:[
   //开发阶段不用  打包才要  用抽离
   new UglifyjsWebpackPlugin()
 ],
});

配置

在package.json下中的

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

执行

npm run build

注意此时打包的dist文件在build文件夹下，而不在项目文件下。

这不是我们需要的，所以此时需要更改base.config.js中的path：

path:path.resolve(__dirname,'../dist'),

开发时,执行：

npm run dev

标签：const,21,require,分离,loader,webpack,js,config
来源： https://blog.csdn.net/xuhuimingc/article/details/116176245

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。