webpack配置
1.初始化項目
npm init
安裝webpack
npm install webpack
2.創(chuàng)建配置目錄結(jié)構(gòu)
build---webpack配置
webpack.common.js webpack基礎(chǔ)配置
webpack.dev.js webpack開發(fā)配置
webpack.prod.js webpack生產(chǎn)配置
config---項目環(huán)境配置
scripts---node腳本文件
build.js 生產(chǎn)環(huán)境使用腳本
start.js 開發(fā)環(huán)境使用腳本
src---資源目錄
3.先嘗試一個簡單配置
1）配置啟動腳本命令
package.json
scripts: {
"start": "node ./scripts/start.js",
"build": "node ./scripts/build.js"
}
2）編寫webpack配置
build/webpack.common.js
const path = require('path');
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js"
}
}
3）編寫開發(fā)模式運行腳本
scripts/build.js
const webpack = require('webpack');
const webpackConfig = require('../build/webpack.common.js');
webpack(webpackConfig, (err, stats) => {
if(err || stats.hasErrors()){
console.log("編譯失敗");
}
});
4）在入口編寫一點內(nèi)容
src/index.js
console.log('hello world');
5）執(zhí)行npm run build 命令抠艾，生成打包目錄dist
4.配置開發(fā)服務器-webpack-dev-server
1）安裝dev服務器和合并配置工具
npm install webpack-dev-server webpack-merge -D
- 改寫webpack配置文件朗恳，common文件導出一個可傳參數(shù)的基本配置生成器由蘑， prod和dev文件使用webpack-merge將通用配置和各自模式下的配置進行合并導出
build/webpack.common.js
const path = require('path');
function webpackCommonConfigCreator(options) {
return {
mode: options.mode,
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "../dist")
}
}
}
module.exports = webpackCommonConfigCreator;
build/webpack.prod.js
const webpackConfigCreator = require('./webpack.common');
const merge = require('webpack-merge');
const config = { };
const options = {
mode: 'production'
}
module.exports = merge(webpackConfigCreator(options), config)
build/webpack.dev.js
const webpackConfigCreator = require('./webpack.common');
const merge = require('webpack-merge');
const config = { };
const options = {
mode: 'development'
}
module.exports = merge(webpackConfigCreator(options), config)
scripts/build.js
const webpack = require('webpack');
const webpackConfig = require('../build/webpack.prod.js’);
webpack(webpackConfig, (err, stats) => {
if (err || stats.hasErrors()) {
console.log("編譯失敗");
}
})
npm run build 輸出正常
3）配置webpack-dev-server
build/webpack.dev.js
contentBase選項是server模式下的output, 開啟server后乐疆，webpack會實時編譯代碼到內(nèi)存
const path = require('path');
const config = {
devServer: {
}
}
scripts/start.js
const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const webpackConfig = require('../build/webpack.dev.js');
const compiler = webpack(webpackConfig);
const options = Object.assign({}, webpackConfig.devServer, { open: true })
const server = new webpackDevServer(compiler, options);
server.listen(3000, '127.0.0.1', () => {
console.log('Starting server on http://localhost:8080');
})
運行命令npm run start, 瀏覽器自動彈出窗口
