一個vue-cli建立項目webpack相關都配置合簡介

時間 2019-11-06

標籤一個 vue cli 建立項目 webpack 相關配置簡介简体版

原文原文鏈接

項目建立

# git clone project
git clone https://github.com/freeshineit/vue2_config.git

# install dependencies
cd vue2_config && npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build
複製代碼

vue項目配置簡介

config 文件夾下的配置文件

config/dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"' // node環境爲開發環境
})
複製代碼

config/dev.env.jscss

config/prod.env.js

module.exports = {
  NODE_ENV: '"production"'  // node環境爲生產環境
}
複製代碼

config/prod.env.jshtml

config/index.js

developmentvue

dev: { //開發環境配置項
    assetsSubDirectory: 'static', // 虛擬靜態資源地址
    assetsPublicPath: '/', 
    proxyTable: {}, // 服務器代理
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8080, // 本地服務器開啓的端口。若是被佔用,則會自動開啓一個端
    autoOpenBrowser: false, // 服務開啓是否自動打開瀏覽器
    errorOverlay: true, // 是否錯誤疊加
    notifyOnErrors: true, // 是否通知錯誤
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
    useEslint: true, // 是否開啓eslint代碼檢查
    // if 值爲true，eslint顯示錯誤和警告的錯誤也將被覆蓋
    // 在瀏覽器中.
    showEslintErrorsInOverlay: false, 
    //...
  }
複製代碼

productionnode

build: { // 生產環境配置項
    index: path.resolve(__dirname, '../dist/index.html'),  // 打包生成模版
    assetsRoot: path.resolve(__dirname, '../dist'), // 打包根路徑
    assetsSubDirectory: 'static', // 打包靜態資源地址 
    assetsPublicPath: '/', // 公共路徑
    // 可以提供將壓縮文件恢復到源文件原始位置的映射代碼的方式，這意味着你能夠在優化壓縮代碼後輕鬆的進行調試
    productionSourceMap: true, // sourcemap
    // ...
  }
複製代碼

config/index.jswebpack

build 文件下的配置文件

build/build.js

// 移除已經編譯的文件
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err
  // 當移除文件成功，執行回調時從新打包項目
  webpack(webpackConfig, (err, stats) => {
    spinner.stop() // 中止ora 的loading
    if (err) throw err // 出錯 拋出錯誤
    // 在編譯完成的回調函數中,在終端輸出編譯的文件
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    if (stats.hasErrors()) { // build 失敗
      console.log(chalk.red(' Build failed with errors.\n')) 
      process.exit(1) // 進程退出
    }
    console.log(chalk.cyan(' Build complete.\n')) // build 完成 
    console.log(chalk.yellow(
      ' Tip: built files are meant to be served over an HTTP server.\n' +
      ' Opening index.html over file:// won\'t work.\n'
    )) // 在終端中輸出提醒文案
  })
})
複製代碼

build/build.jsgit

build/utils.js

//根據`_path`生成資源路徑和文件
exports.assetsPath = function (_path) { 
  const assetsSubDirectory = process.env.NODE_ENV === 'production'
    ? config.build.assetsSubDirectory
    : config.dev.assetsSubDirectory

  return path.posix.join(assetsSubDirectory, _path)
}
//...

// https://vue-loader.vuejs.org/en/configurations/extract-css.html
// 要使用動態樣式語言,你可下載下面幾種less、sass、stylus
// 例如安裝less執行: npm i -S less less-loader
// 就可使用less了
return { 
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
//...
複製代碼

build/utils.jsgithub

build/vue-loader.conf.js

// 是vue-loader的一些配置項
module.exports = {
  // 調用utils工具類生成樣式loader的配置
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  // ...
}
複製代碼

build/vue-loader.conf.jsweb

build/webpack.base.conf.js

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: { // 入口文件
    app: './src/main.js'
  },
  output: { // 編譯輸出文件
    path: config.build.assetsRoot, //導出目錄的絕對路徑
    filename: '[name].js', //導出文件的文件名
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath //生產模式或開發模式下html、js等文件內部引用的公共路徑
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'], //自動解析肯定的拓展名,使導入模塊時能夠不帶拓展名
    alias: { // 建立import或require的別名 方便簡寫導入路徑
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  }
  //...
}
複製代碼

build/webpack.base.conf.jsvue-cli

build/webpack.dev.conf.js

const devWebpackConfig = merge(baseWebpackConfig, {
    // ...
  plugins: [ // 插件配置
    new webpack.DefinePlugin({ // webpack 自帶的插件
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(), // webpack 自帶的插件
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. // webpack 自帶的插件
    new webpack.NoEmitOnErrorsPlugin(), // webpack 自帶的插件
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({ // html模版處理配置
      filename: 'index.html', // 生成文件
      template: 'index.html', // 模版文件
      inject: true //注入的js文件將會被放在body標籤中,當值爲'head'時，將被放在head標籤中
    }),
    // copy custom static assets
    new CopyWebpackPlugin([ // 複製插件 ， 只要時複製static文件夾中文件到config.dev.assetsSubDirectory文件夾下
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*'] //忽視.*文件
      }
    ])
  ],
  // ...
})
複製代碼

build/webpack.dev.conf.jsnpm

build/webpack.prod.conf.js

const webpackConfig = merge(baseWebpackConfig, {
    // ...
  output: { // 生成環境 編譯輸出文件
    path: config.build.assetsRoot, // 導出文件目錄
    filename: utils.assetsPath('js/[name].[chunkhash].js'), //導出js文件名，文件名帶有chunkhash碼
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') // 非入口文件的文件名，而又須要被打包出來的文件命名配置,如按需加載的模塊
  },
  plugins: [ // webpack 插件配置
    new webpack.DefinePlugin({
      'process.env': env  //配置全局環境爲生產環境
    }),
    new UglifyJsPlugin({ // js代碼壓縮插件
      uglifyOptions: {
        compress: { // 代碼壓縮配置
          warnings: false  // 是否顯示警告， false 不顯示
        }
      },
      sourceMap: config.build.productionSourceMap,  // 是否生產sourcemap文件
      parallel: true  // 並行
    }),
    new ExtractTextPlugin({ // 抽取css 樣式表 單獨打包
      filename: utils.assetsPath('css/[name].[contenthash].css'), // 導出css文件名，文件名帶有contenthash碼
      //設置下面選項爲`false`不會從代碼分割塊中提取CSS。
      //他們的CSS將被插入style-loader時，代碼分割塊經過webpack已加載
      //它的當前設置爲`true`, 由於咱們看到sourcemaps都包括在代碼分割bundle, 以及當它的`假`增長文件大小
      // https://github.com/vuejs-templates/webpack/issues/1110
      allChunks: true,  // 全部塊
    }),
    // 壓縮提取的CSS。咱們正在使用這個插件，使之成爲可能
    // 重複的CSS從不一樣的組件能夠被刪除（deduped）
    new OptimizeCSSPlugin({  // 壓縮抽取到css
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    // 生成在 `dist` 文件下 `index.html`
    // 你能夠經過編輯/ index.html自定義輸出（自定義模版中到內容）
    new HtmlWebpackPlugin({
      filename: config.build.index,  // 生成到文件名
      template: 'index.html', // 模版（當模版不存在時，生產文件時雖然生成了，可是有點問題）
      inject: true, //注入的js文件將會被放在body標籤中,當值爲'head'時，將被放在head標籤中
      minify: { // html壓縮配置
        removeComments: true, //移除html中的註釋
        collapseWhitespace: true, // 移除html中的空格
        removeAttributeQuotes: true //移除html元素中屬性的引號
      },
      chunksSortMode: 'dependency' // 按照依賴的順序引入
    }),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.ModuleConcatenationPlugin(),
    // 分離公共js到vendor文件中去
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor', // 文件名
      minChunks (module) { //聲明公共的模塊來自node_modules文件夾
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // 運行時模塊提取webpack表現爲了本身的文件以防止每當應用程序包更新vendor文件哈希被更新
    // 下面主要是將運行時代碼提取到單獨的manifest文件中，防止其影響vendor.js
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // 本實例代碼分塊，將它們捆在一個單獨的塊中提取共享塊，相似於vendor文件的塊
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
    // 複製指定文件靜態資源, 下面將static文件內的複製靜態資源內容複製到指定文件夾
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
})
複製代碼