vue-cliのwebpackテンプレート項目配置ファイル分析(转)
20780 ワード
ソース:http://blog.csdn.net/hongchh/article/details/55113751
1.書類構造[color=0000 ff]
本論文は主に開発(dev)と構築(build)の二つのプロセスに関連するファイルを分析しているので、以下のファイル構造は対応する内容のみを示している。
├─build├├-build.js├├├-check-versions.js├├-dev-client.js├├─dev-server.js├├──utils.jjs├├├├├├├├ζζζ-utututils.jjbbbbbbbbbbbbbblis.jjs.js.js.js.js.js.js.js s├webpack.prod.com nf.js├├├-webpack.test.co nf.js├-config├-dev.env.js├─index.js├├-prod.envjs喾瓜─test.env.js├─…顫—package.json
2.指令分析[/color][/color]
まずpackage.jsonの中のscriptsフィールドを見て、
「scripts」:「「「dev」:「node build/dev-server.js」,「build」:「node build/build.js」,「unit」:「cross-env BABELLu ENV=test Cast Cast/unit/kakarmma.cma.co nf.js.single.js--single.rururude...」::「p.rururururudedededededededededededen..」:::「p.rururururururudededededededen."""""""""""""""""""""""""""""":「lint」:「eslint--ext.js.vue src test/unit/specs test/e 2 e/specs」
テストのものはまず見ないで、直接「dev」と「build」を見ます。「npm run dev」を実行するときは、build/dev-server.jsファイルで、npm run buildを実行するときは、build/build.jsファイルを実行します。この二つのファイルからコード読み取り分析ができます。
3.buildフォルダ分析[color=0000 ff]
まず、「npm run dev」を実行する際に最初に実行するbuild/dev-server.jsファイルを見てください。この文書は主に以下のいくつかのことを完成しています。
nodeとnpmのバージョン導入に関するプラグインと構成作成expressサーバとwebpackコンパイラの構成開発ミドルウェア(webpack-dev-middleware)と熱重量中段ウェアのマウントプロキシサービスとミドルウェア構成静的リソース起動サーバが特定のポートを自動的に開いてブラウザを開く(8080)。説明:expressサーバーは静的なファイルサービスを提供していますが、http-proxy-middlewareを使って、httpが代理の中間部品を要求しています。フロントエンド開発中にバックグラウンドのAPIが必要なら、プロxyTableを配置することによって、対応するバックグラウンド要求を専用のAPIサーバに代行することができる。
詳細はコードのコメントを見てください。
htmlコード
コードから見ると、dev-serverが使用するwebpack構成は、build/webpack.dev.co.com nf.jsファイルから来ています。build/webpack.dev.com nf.jsではwebpack.base.com nf.jsを引用していますので、ここでまずwebpack.base.com nf.jsを分析します。
webpack.base.com nf.jsは主に以下のようなことを完成しました。
設定webpackは、入口にwebpackの出力経路と命名規則設定モジュールのresove規則をコンパイルして、異なるタイプのモジュールを配置する処理規則の説明を行います。この構成には、js、vue、写真、フォントなどのいくつかの種類のファイルの処理規則があります。他のファイルを処理する必要があれば、module.rules内に配置することができます。
具体的にはコードのコメントを見てください。
htmlコード
続いてwebpack.dev.co.nf.jsを見ます。この中にwebpack.base.com nfの基礎の上に開発環境の下の配置を追加して改善しました。主に以下のいくつかのことを含みます。
hot-reloadに関するコードをentry chunks統合ベースのwebpack構成に追加します。style Loaders構成Source Maps構成webpackプラグインの詳細はコードコメントを参照してください。
htmlコード
前のwebpackプロファイルではutils.jsとvue-loader.co.nf.jsの2つのファイルを使用しています。utilsは主に以下の3つのことを完成します。
静的リソースパスを構成してcssLoadersを生成し、ロードするために使用します。vueファイル中のスタイル生成style Loadersは.vueファイル中の単独で存在しないスタイルファイルvue-loader.com nfをロードするために使用します。cssキャリアとコンパイルcssの後に、自動的にプレフィックスを追加します。詳細はコードのコメントを見てください。
htmlコード
開発環境下の配置について説明しました。環境下の配置を見に来ました。npm run buildを実行する時、まず実行するのはbuild/build.jsファイルで、build.jsは主に以下のいくつかのことを完成します。
loadingアニメーション削除作成先フォルダwebpackコンパイル出力情報説明:webpackコンパイル後、設定内で指定されたターゲットフォルダに出力されます。ターゲットフォルダを削除して作成するのは、予測できない影響を与えないように古い内容を除去するためです。
詳細はコードのコメントを見てください。
htmlコード
構築時に使用されるwebpack構成は、webpack.prod.co.com.jsから来ており、この構成は同じwebpack.base.com nfに基づいてさらに改善されている。主に次のいくつかのことを完成します。
統合ベースのwebpack構成は、style Loadersを用いてwebpackの出力設定webpackプラグインgzipモードのwebpackプラグインにwebpack-bundleの分析説明を設定します。webpackプラグインには、醜化圧縮コードやcssファイルからの抽出などのプラグインが多く含まれています。
詳細はコードを見てください。
htmlコード
最後はbuildフォルダの下の二つの比較的簡単なファイルです。dev-client.jsは使われていないようです。コードも比較的簡単です。ここでは多く話しません。check-version.jsはnodeとnpmのバージョンの検査を完了しました。以下はそのコードのコメントです。
htmlコード
[color=0000芰菗菷菷config/index.js]
configフォルダの下で一番主要なファイルはindex.jsです。この中で開発と構築の二つの環境下の配置を説明しました。前のbuildフォルダの下にもindex.jsの中の構成を引用したファイルがたくさんあります。以下はコードのコメントです。
htmlコード
1.書類構造[color=0000 ff]
本論文は主に開発(dev)と構築(build)の二つのプロセスに関連するファイルを分析しているので、以下のファイル構造は対応する内容のみを示している。
├─build├├-build.js├├├-check-versions.js├├-dev-client.js├├─dev-server.js├├──utils.jjs├├├├├├├├ζζζ-utututils.jjbbbbbbbbbbbbbblis.jjs.js.js.js.js.js.js.js s├webpack.prod.com nf.js├├├-webpack.test.co nf.js├-config├-dev.env.js├─index.js├├-prod.envjs喾瓜─test.env.js├─…顫—package.json
2.指令分析[/color][/color]
まずpackage.jsonの中のscriptsフィールドを見て、
「scripts」:「「「dev」:「node build/dev-server.js」,「build」:「node build/build.js」,「unit」:「cross-env BABELLu ENV=test Cast Cast/unit/kakarmma.cma.co nf.js.single.js--single.rururude...」::「p.rururururudedededededededededededen..」:::「p.rururururururudededededededen."""""""""""""""""""""""""""""":「lint」:「eslint--ext.js.vue src test/unit/specs test/e 2 e/specs」
テストのものはまず見ないで、直接「dev」と「build」を見ます。「npm run dev」を実行するときは、build/dev-server.jsファイルで、npm run buildを実行するときは、build/build.jsファイルを実行します。この二つのファイルからコード読み取り分析ができます。
3.buildフォルダ分析[color=0000 ff]
まず、「npm run dev」を実行する際に最初に実行するbuild/dev-server.jsファイルを見てください。この文書は主に以下のいくつかのことを完成しています。
nodeとnpmのバージョン導入に関するプラグインと構成作成expressサーバとwebpackコンパイラの構成開発ミドルウェア(webpack-dev-middleware)と熱重量中段ウェアのマウントプロキシサービスとミドルウェア構成静的リソース起動サーバが特定のポートを自動的に開いてブラウザを開く(8080)。説明:expressサーバーは静的なファイルサービスを提供していますが、http-proxy-middlewareを使って、httpが代理の中間部品を要求しています。フロントエンド開発中にバックグラウンドのAPIが必要なら、プロxyTableを配置することによって、対応するバックグラウンド要求を専用のAPIサーバに代行することができる。
詳細はコードのコメントを見てください。
htmlコード
// NodeJS npm
require('./check-versions')()
//
var config = require('../config')
// Node (NODE_ENV), config
if (!process.env.NODE_ENV) {
process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
}
// 、 、
// dev-server , :localhost:8080
var opn = require('opn')
var path = require('path')
var express = require('express')
var webpack = require('webpack')
// express , http
// :localhost:8080/api/xxx --> localhost:3000/api/xxx
// API ,
var proxyMiddleware = require('http-proxy-middleware')
// Node webpack
var webpackConfig = process.env.NODE_ENV === 'testing'
? require('./webpack.prod.conf')
: require('./webpack.dev.conf')
// dev-server , config.dev.port , 8080
var port = process.env.PORT || config.dev.port
// , false
var autoOpenBrowser = !!config.dev.autoOpenBrowser
// HTTP , API
var proxyTable = config.dev.proxyTable
// 1 express
var app = express()
// webpack Compiler
var compiler = webpack(webpackConfig)
// webpack-dev-middleware compiler
//
// express
var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})
// webpack-hot-middleware,
var hotMiddleware = require('webpack-hot-middleware')(compiler, {
log: () => {}
})
// html-webpack-plugin
compiler.plugin('compilation', function (compilation) {
compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
hotMiddleware.publish({ action: 'reload' })
cb()
})
})
// proxyTable express
Object.keys(proxyTable).forEach(function (context) {
var options = proxyTable[context]
// options, 'www.example.com' { target: 'www.example.com' }
if (typeof options === 'string') {
options = { target: options }
}
app.use(proxyMiddleware(options.filter || context, options))
})
// handle fallback for HTML5 history API
// URL, SPA
app.use(require('connect-history-api-fallback')())
// serve webpack bundle output
// webpack
// webpack express
app.use(devMiddleware)
// enable hot-reload and state-preserving
// compilation error display
// express
app.use(hotMiddleware)
// serve pure static assets
//
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// express
app.use(staticPath, express.static('./static'))
// , :http://localhost:8080
var uri = 'http://localhost:' + port
// webpack (valid) ,
devMiddleware.waitUntilValid(function () {
console.log('> Listening at ' + uri + '
')
})
// express (8080)
module.exports = app.listen(port, function (err) {
if (err) {
console.log(err)
return
}
// when env is testing, don't need open it
// , opn uri
if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
opn(uri)
}
})
[color=0000芰菗菗build/webpack.base.com nf.js[/color]コードから見ると、dev-serverが使用するwebpack構成は、build/webpack.dev.co.com nf.jsファイルから来ています。build/webpack.dev.com nf.jsではwebpack.base.com nf.jsを引用していますので、ここでまずwebpack.base.com nf.jsを分析します。
webpack.base.com nf.jsは主に以下のようなことを完成しました。
設定webpackは、入口にwebpackの出力経路と命名規則設定モジュールのresove規則をコンパイルして、異なるタイプのモジュールを配置する処理規則の説明を行います。この構成には、js、vue、写真、フォントなどのいくつかの種類のファイルの処理規則があります。他のファイルを処理する必要があれば、module.rules内に配置することができます。
具体的にはコードのコメントを見てください。
htmlコード
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
//
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
// webpack
entry: {
app: './src/main.js'
},
// webpack
output: {
// webpack ( :/dist)
path: config.build.assetsRoot,
// webpack bundle
filename: '[name].js',
// webpack
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
// resolve
resolve: {
// resolve
extensions: ['.js', '.vue', '.json'],
// resolve
modules: [
resolve('src'),
resolve('node_modules')
],
// , ,
// import Vue from 'vue/dist/vue.common.js' import Vue from 'vue'
alias: {
'vue$': 'vue/dist/vue.common.js',
'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components')
}
},
//
module: {
rules: [
{// src test .js .vue eslint-loader
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{// .vue vue-loader
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{// src test .js babel-loader
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{// url-loader,query.name
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{// url-loader,query.name
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
[color=0000菗菗菗菗build/webpack.dev.co nf.js[/color]続いてwebpack.dev.co.nf.jsを見ます。この中にwebpack.base.com nfの基礎の上に開発環境の下の配置を追加して改善しました。主に以下のいくつかのことを含みます。
hot-reloadに関するコードをentry chunks統合ベースのwebpack構成に追加します。style Loaders構成Source Maps構成webpackプラグインの詳細はコードコメントを参照してください。
htmlコード
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
//
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
// HTML (link/script) webpack
var HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack 、
var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
// add hot-reload related code to entry chunks
Object.keys(baseWebpackConfig.entry).forEach(function (name) {
baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
})
// webpack
module.exports = merge(baseWebpackConfig, {
// , styleLoaders
module: {
rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
},
// Source Maps。 cheap-module-eval-source-map
devtool: '#cheap-module-eval-source-map',
// webpack
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.HotModuleReplacementPlugin(),
// ,
new webpack.NoEmitOnErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true
}),
new FriendlyErrorsPlugin()
]
})
[color=0000芫菗菗菗璝build/utils.jsとbuild/vue-loader.co nf.js[/color]前のwebpackプロファイルではutils.jsとvue-loader.co.nf.jsの2つのファイルを使用しています。utilsは主に以下の3つのことを完成します。
静的リソースパスを構成してcssLoadersを生成し、ロードするために使用します。vueファイル中のスタイル生成style Loadersは.vueファイル中の単独で存在しないスタイルファイルvue-loader.com nfをロードするために使用します。cssキャリアとコンパイルcssの後に、自動的にプレフィックスを追加します。詳細はコードのコメントを見てください。
htmlコード
var utils = require('./utils')
var config = require('../config')
var isProduction = process.env.NODE_ENV === 'production'
module.exports = {
// css
loaders: utils.cssLoaders({
sourceMap: isProduction
? config.build.productionSourceMap
: config.dev.cssSourceMap,
extract: isProduction
}),
// css
postcss: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
[color=0000菗菗菷菗build/build.js]開発環境下の配置について説明しました。環境下の配置を見に来ました。npm run buildを実行する時、まず実行するのはbuild/build.jsファイルで、build.jsは主に以下のいくつかのことを完成します。
loadingアニメーション削除作成先フォルダwebpackコンパイル出力情報説明:webpackコンパイル後、設定内で指定されたターゲットフォルダに出力されます。ターゲットフォルダを削除して作成するのは、予測できない影響を与えないように古い内容を除去するためです。
詳細はコードのコメントを見てください。
htmlコード
// https://github.com/shelljs/shelljs
// NodeJS npm
require('./check-versions')()
process.env.NODE_ENV = 'production'
// Elegant terminal spinner
var ora = require('ora')
var path = require('path')
//
var chalk = require('chalk')
// Unix
var shell = require('shelljs')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start() // loading
//
var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
//
shell.rm('-rf', assetsPath)
//
shell.mkdir('-p', assetsPath)
shell.config.silent = true
// static
shell.cp('-R', 'static/*', assetsPath)
shell.config.silent = false
// webpack
webpack(webpackConfig, function (err, stats) {
spinner.stop() // loading
if (err) throw err
//
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '
')
console.log(chalk.cyan(' Build complete.
'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.
' +
' Opening index.html over file:// won\'t work.
'
))
})
[color=0000菗菗菗菗build/webpack.prod.co nf.js[/color]構築時に使用されるwebpack構成は、webpack.prod.co.com.jsから来ており、この構成は同じwebpack.base.com nfに基づいてさらに改善されている。主に次のいくつかのことを完成します。
統合ベースのwebpack構成は、style Loadersを用いてwebpackの出力設定webpackプラグインgzipモードのwebpackプラグインにwebpack-bundleの分析説明を設定します。webpackプラグインには、醜化圧縮コードやcssファイルからの抽出などのプラグインが多く含まれています。
詳細はコードを見てください。
htmlコード
var path = require('path')
var utils = require('./utils')
var webpack = require('webpack')
var config = require('../config')
var merge = require('webpack-merge')
var baseWebpackConfig = require('./webpack.base.conf')
var HtmlWebpackPlugin = require('html-webpack-plugin')
// webpack bundle
// css,js webpack bundle
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var env = process.env.NODE_ENV === 'testing'
? require('../config/test.env')
: config.build.env
// webpack
var webpackConfig = merge(baseWebpackConfig, {
module: {
rules: utils.styleLoaders({
sourceMap: config.build.productionSourceMap,
extract: true
})
},
devtool: config.build.productionSourceMap ? '#source-map' : false,
// webpack
output: {
//
path: config.build.assetsRoot,
//
filename: utils.assetsPath('js/[name].[chunkhash].js'),
//
chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
},
// webpack
plugins: [
// http://vuejs.github.io/vue-loader/en/workflow/production.html
new webpack.DefinePlugin({
'process.env': env
}),
//
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
sourceMap: true
}),
// css
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css')
}),
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: process.env.NODE_ENV === 'testing'
? 'index.html'
: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// 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
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
]
})
// gzip compression
if (config.build.productionGzip) {
var CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
if (config.build.bundleAnalyzerReport) {
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
webpackConfig.plugins.push(new BundleAnalyzerPlugin())
}
module.exports = webpackConfig
[color=0000菗菗菗菗build/check-versions.jsとbuild/dev-client.js[/color]最後はbuildフォルダの下の二つの比較的簡単なファイルです。dev-client.jsは使われていないようです。コードも比較的簡単です。ここでは多く話しません。check-version.jsはnodeとnpmのバージョンの検査を完了しました。以下はそのコードのコメントです。
htmlコード
//
var chalk = require('chalk')
// (The semantic version parser used by npm)
var semver = require('semver')
// package.json
var packageConfig = require('../package.json')
// cmd
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
// node npm
var versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version),
versionRequirement: packageConfig.engines.node
},
{
name: 'npm',
currentVersion: exec('npm --version'),
versionRequirement: packageConfig.engines.npm
}
]
module.exports = function () {
var warnings = []
//
for (var i = 0; i < versionRequirements.length; i++) {
var mod = versionRequirements[i]
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
//
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (var i = 0; i < warnings.length; i++) {
var warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
4.configフォルダ分析[color=0000 ff][color=0000芰菗菷菷config/index.js]
configフォルダの下で一番主要なファイルはindex.jsです。この中で開発と構築の二つの環境下の配置を説明しました。前のbuildフォルダの下にもindex.jsの中の構成を引用したファイルがたくさんあります。以下はコードのコメントです。
htmlコード
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')
module.exports = {
//
build: {
// webpack
env: require('./prod.env'),
// index.html
index: path.resolve(__dirname, '../dist/index.html'),
// webpack
assetsRoot: path.resolve(__dirname, '../dist'),
// webpack
assetsSubDirectory: 'static',
// webpack
assetsPublicPath: '/',
// SourceMap
productionSourceMap: true,
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
// gzip
productionGzip: false,
// gzip
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
//
dev: {
// webpack
env: require('./dev.env'),
// dev-server
port: 8080,
// dev-server
autoOpenBrowser: true,
// webpack
assetsSubDirectory: 'static',
// webpack
assetsPublicPath: '/',
// , API
// '/api/xxx' 'www.example.com/api/xxx'
proxyTable: {},
// CSS Sourcemaps off by default because relative paths are "buggy"
// with this option, according to the CSS-Loader README
// (https://github.com/webpack/css-loader#sourcemaps)
// In our experience, they generally work as expected,
// just be aware of this issue when enabling this option.
// cssSourceMap
cssSourceMap: false
}
}
config/dev.env.js、config/prod.env.jsとconfig/test.env.jsの3つのファイルは簡単に環境変数を設定しただけで、特別なものはありません。