有一句話叫“前人栽樹(shù)后人乘涼”，還有一句話叫“如果說(shuō)我看得比別人更遠(yuǎn)些，那是因?yàn)槲艺驹诰奕说募绨蛏稀?。前一句是?guó)人的俗語(yǔ)，后一句是那個(gè)發(fā)現(xiàn)了“萬(wàn)有引力”定律的牛頓說(shuō)的。為什么要引用這兩句呢？是因?yàn)槲覄傞_(kāi)始用vue的時(shí)候，使用的是vue-cli來(lái)搭建vue項(xiàng)目，快速又好用；我剛開(kāi)始用react的時(shí)候，使用的是create-react-app來(lái)搭建react項(xiàng)目，方便又省事。使用這些已有的腳手架來(lái)搭建項(xiàng)目，無(wú)可厚非，對(duì)于新手來(lái)說(shuō)，也確實(shí)能快速構(gòu)建，不做置評(píng)。

創(chuàng)新互聯(lián)公司專注于企業(yè)全網(wǎng)整合營(yíng)銷推廣、網(wǎng)站重做改版、城步網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5網(wǎng)站設(shè)計(jì)、購(gòu)物商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為城步等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

既然已經(jīng)有了這些現(xiàn)成的腳手架了，為什么我們還熱衷于自己來(lái)配置webpack來(lái)搭建構(gòu)建項(xiàng)目呢？因?yàn)槲覀冎挥辛私獠W(xué)會(huì)了配置webpack，我們才能更好地在打包構(gòu)建項(xiàng)目時(shí)將webpack的性能發(fā)揮到極致，才能根據(jù)自身項(xiàng)目的實(shí)際需求，配置有利于項(xiàng)目開(kāi)發(fā)的各種工具、插件，提高我們的開(kāi)發(fā)效率。比如我們?cè)诖虬?xiàng)目時(shí)，可以分析哪些地方降低了webpack的打包速度，別人打包速度需要花去十多秒、二十多秒，而你能將打包的速度提升至幾秒，這就是你的優(yōu)勢(shì)。當(dāng)然，涉及到webpack的運(yùn)行原理以及開(kāi)發(fā)自己的loader或plugin就可以自行去學(xué)習(xí)了哈，本文只帶你配置一個(gè)webpack來(lái)搭建一個(gè)vue項(xiàng)目。

wepack作為一個(gè)“模塊打包機(jī)”其實(shí)是依賴了龐大的插件體系，插件體系是webpack的核心，可以說(shuō)，webpack的生態(tài)就是建立在眾多插件之上的，而開(kāi)發(fā)環(huán)境和生產(chǎn)打包環(huán)境依賴的插件還是有所不同的，先以開(kāi)發(fā)環(huán)境為例

webpack.config.js：

const path = require('path');
const Webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');

const resolve = (dir) => {
 return path.join(__dirname, '..', dir)
}

const assetsPath = (_path) => {
 return path.join('static', _path)
}

const isEnvProduction = process.env.NODE_ENV == "production", port = 3003;

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: resolve('src'),
 output: {
  path: resolve('dist'),
  filename: isEnvProduction ? assetsPath('js/[name]-[hash].js') : '[name]-[hash].js',
  chunkFilename: isEnvProduction ? assetsPath('js/[name]-[chunkhash:5].min.js') : '[name]-[chunkhash:5].min.js',
  publicPath: '/',
 },
 resolve: {
  extensions: ['*', '.js', '.vue'], //webpack2.x extensions[0]不能為空 resolve屬性中的extensions數(shù)組中用于配置程序可以自行補(bǔ)全哪些文件后綴
  alias: {
   '@': resolve('src'),
   // 'vue$': 'vue/dist/vue.esm.js'
  },
 },
 //提取公共代碼
 optimization: {
  splitChunks: {
   cacheGroups: {
    commons: {
     test: /[\\/]node_modules[\\/]/, //表示默認(rèn)拆分node_modules中的模塊
     name: "vendor", //提取出來(lái)的文件命名
     chunks: "all",  //提取所有文件的公共部分
     minChunks: 2,   //表示提取公共部分最少的文件數(shù) 模塊被引用>=2次，拆分至vendors公共模塊
     minSize: 0,   //表示提取公共部分最小的大小 模塊超過(guò)0k自動(dòng)被抽離成公共模塊
    },
   }
  }
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    use: ['vue-loader'],
    exclude: /node_modules/,
   },
   {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/,
    query: {
     "presets": ["@babel/env"],
     "plugins":
      ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-transform-runtime"],
    }
   },
   {
    test: /\.(sa|sc|c)ss$/,
    use: [
     MiniCssExtractPlugin.loader,
     'css-loader',
     'postcss-loader',
     'sass-loader',
    ],
   },
   {
    test: /\.(eot?.+|svg?.+|ttf?.+|otf?.+|woff?.+|woff2?.+)$/,
    use: 'file-loader?name=' + (isEnvProduction ? assetsPath('fonts/[name].[hash:8].[ext]') : 'fonts/[name].[hash:8].[ext]')
   },
   {
    test: /\.(jpg|jpeg|png|gif|ico|svg)$/,
    loader: 'url-loader',
    options: {
     limit: 10000,
     name: isEnvProduction ? assetsPath('images/[name].[hash:8].[ext]') : 'images/[name].[hash:8].[ext]',
    }
   },
  ],
 },
 plugins: [
  new ProgressBarPlugin(),
  new VueLoaderPlugin(),
  //ProvidePlugin是webpack的內(nèi)置模塊，使用ProvidePlugin加載的模塊在使用時(shí)將不再需要import和require進(jìn)行引入
  new Webpack.ProvidePlugin({
   _: 'lodash',
  }),
  new HtmlWebpackPlugin({
   template: './src/index.html', //文件路徑及名稱
   filename: 'index.html',   //輸出后的文件名稱
  }),
  new MiniCssExtractPlugin({
   filename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css",
   chunkFilename: isEnvProduction ? assetsPath("css/[name]-[hash].css") : "css/[name]-[hash].css", //默認(rèn)就是取的以id或name為開(kāi)頭的css，所以可以加這行配置代碼，也可以不加
  }),
 ],
 devServer: {
  port,
  host: '0.0.0.0',
  open: `http://localhost:${port}`,
  stats: {
   hash: false,
   builtAt: false,
   version: false,
   modules: false,
   children: false, ////解決類似Entrypoint undefined = index.html和Entrypoint mini-css-extract-plugin = *的警告
   entrypoints: false,
   colors: {
    green: '\u001b[32m',
    yellow: '\u001b[32m',
   }
  },
  proxy: {
   '/': {
    target: '',
    changeOrigin: true
   }
  },
  inline: true,
  compress: false,
  disableHostCheck: true,
  historyApiFallback: true,
 },
}

本文名稱：使用webpack搭建vue項(xiàng)目及注意事項(xiàng)-創(chuàng)新互聯(lián)
標(biāo)題路徑：http://weahome.cn/article/cccdio.html