2017-12-30 48 views
2

내 webpack 구성에서 제품 및 dev 환경에 별도의 구성을 시도했습니다. 각 작업마다 다른 JS 파일을 얻으려고합니다. 의미, 내가 그것을 구축, 특정 이름 "lib.js"와 내 환경을 실행할 때, 컴파일 된 파일을 "dist"폴더로 이동하려는 환경에 가서 내 코드가 필요합니다. 이 내 webpack.config.js 파일입니다Webpack prod vs dev

const webpack = require('webpack') 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 
let path = require('path'); 
let config = { 
    entry: [ 

     './src/index.js' 
    ], 
    module: { 
     rules: [{ 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       use: [ 
        'react-hot-loader', 
        'babel-loader' 
       ] 
      }, 
      { 
       test: /\.(css)$/, 
       use: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader' 

       }) 
      }, 
      { 
       test: /\.less$/, 
       use:ExtractTextPlugin.extract({ 
        use: 'less-loader' 
       }) 

      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader', 
       }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       use: ['babel-loader', 'eslint-loader'] 
      } 
     ], 

    }, 
    resolve: { 
     extensions: ['*', '.js', '.jsx', '.css'], 
    }, 
    plugins: [ 
     new webpack.DefinePlugin({ 
      'process.env': { 
       'NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
      } 
     }) 
    ], 
    devServer: { 
     contentBase: './dist', 
     historyApiFallback: true 
    }, 
    devtool : "cheap-module-source-map", 


} 
if (process.env.NODE_ENV === 'production') { 
    config.output= { 
     path: path.join(__dirname, '/build/'), 
     filename: 'lib.js', 
     library: ['MyLibrary'], 
     libraryTarget: 'umd' 
    }; 
    config.plugins.push(
     new webpack.optimize.UglifyJsPlugin({ sourceMap: true }), 
     new ExtractTextPlugin({ 
      filename: 'bundle.css', 
      disable: false, 
      allChunks: true 
     }), 
     new webpack.optimize.AggressiveMergingPlugin({ 
      minSizeReduce: 1, 
      moveToParents: true 

     }) 
    ) 

} else { 
    config.output= { 
     path: path.join(__dirname, '/dist/'), 
     filename: 'bundle.js', 
     library: ['MyLibrary'], 
     libraryTarget: 'umd', 
     publicPath: '/dist/' 

    }; 
    config.plugins.push(
     new webpack.optimize.UglifyJsPlugin({ sourceMap: true }), 
     new ExtractTextPlugin({ disable: true }) 
    ) 
} 

module.exports = config 

이러한 내 스크립트입니다 :

"scripts": { 
"dev": "webpack-dev-server -d --env.platform=default --progress --hot", 
"build": "set NODE_ENV=production && webpack -p --progress --hot" 
    } 

무엇 실제로 일어나는 것은 제가 구축 할 경우에만 파일이 DIST 폴더로 이동한다는 것입니다,도 NODE_ENV 매개 변수를 "생산"으로 설정했지만. 도움이 될 것입니다. 감사합니다.

+0

@Prakashsharma removal && 실제로 건물에서 완전히 멈 춥니 다. btw, 윈도우 머신 때문에 SET를 사용하고있다 – Basilf

답변

1

그것은 아마 그 후에 당신의 webpack 설정에 일치하지 않습니다 공백으로 productionNODE_ENV을 설정하면 NODE_ENV=production 후이 후행 공백을 수 있습니다. 이 같은 package.json에서 변경 시도 :이 this에 @daw에 의해 주석에서 언급

"build": "set NODE_ENV=production&& webpack -p --progress --hot" 

SO 대답합니다.

+0

그건 사실이야 !! – Basilf