var path = require('path');
var webpack = require('webpack');
// var openbrowserplugin = require('open-browser-webpack-plugin');
var htmlwebpackplugin = require('html-webpack-plugin');
var extracttextplugin = require("extract-text-webpack-plugin"); //css單獨打包
//定義了一些資料夾的路徑
var root_path = path.resolve(__dirname);
var build_path = path.resolve(root_path, 'build');
//template的資料夾路徑
module.exports = ,
//輸出的檔名 合併以後的js會命名為bundle.js
output: ,
externals: ,
devtool: 'cheap-module-eval-source-map',
devserver: }},
resolve: ,
module: ,
,] ],// `style: true` 會載入 less 檔案
presets: ['es2015', 'react']}},
]},
plugins: [
new extracttextplugin('[name].css'),
//建立了兩個htmlwebpackplugin的例項,生成兩個頁面
new htmlwebpackplugin(),
//自動開啟該頁面
// new openbrowserplugin(),
new webpack.hotmodulereplacementplugin()
]};
這是生產配置
var path = require('path');
var webpack = require('webpack');
// var openbrowserplugin = require('open-browser-webpack-plugin');
var htmlwebpackplugin = require('html-webpack-plugin');
var extracttextplugin = require("extract-text-webpack-plugin"); //css單獨打包
var optimizecssassetsplugin = require('optimize-css-assets-webpack-plugin'); // 壓縮css的外掛程式
//定義了一些資料夾的路徑
var root_path = path.resolve(__dirname);
var build_path = path.resolve(root_path, 'dist');
//template的資料夾路徑
var config = module.exports = ,
//輸出的檔名 合併以後的js會命名為bundle.js
output: ,
externals: ,
devtool: 'source-map',
resolve: ,
module: ,,]]
}},]},
plugins: [
//以下配置可以告訴 react 當前是生產環境,請最小化壓縮 js ,即把開發環境中的一些提示、警告、判斷通通去掉,直流以下發布之後可用的**。
new webpack.defineplugin(
}),//把入口檔案裡面的陣列打包成verdors.js
// new webpack.optimize.commonschunkplugin('vendors','commons/vendors.js'),
// new webpack.optimize.commonschunkplugin(
// ),
new extracttextplugin('[name].[chunkhash:6].css'),
//建立了兩個htmlwebpackplugin的例項,生成兩個頁面
new htmlwebpackplugin(),
//壓縮css
new optimizecssassetsplugin( },
canprint: true
}),//這個使用uglifyjs壓縮你的js**
new webpack.optimize.uglifyjsplugin(,
compress:
})]};
webpack1 x至webpack3 x遷移踩坑
今天將我自己的手腳架從webpack1.x遷移到webpack3.x,途中一切順利,跟著遷移文件 1 其中比較坑爹的2點是 1 postcss配置。需要在根目錄建立postcss.config.js這樣乙個配置檔案 嗯,解耦了。配置項變了啊。挺坑的。路過的朋友注意一下。2 css使用hot modu...
webpack構建react應用
一 新建乙個資料夾。mkdir webpack react demo二 在此資料夾下建立package.json檔案 右鍵新建檔案也行。這裡使用 npm init 初始化專案的方式自動生成。在webpack react demo資料夾下進入cmd命令列,輸入npm init,一路enter就行。三 ...
webpack 在構建react時候的peizhi
1.安裝webpack 全域性安裝 sudo npm install g webpack 本專案安裝 npm i webpack d 目錄結構 2.webpack配置 每個專案下都必須配置有乙個 webpack.config.js 它的作用如同常規的 gulpfile.js gruntfile.js...