webpack4+react項目搭建(一)

webpack配置

1.初始化項目

npm init

安裝webpack

npm install webpack

2.創建配置目錄結構

build---webpack配置
webpack.common.js webpack基礎配置
webpack.dev.js webpack開發配置
webpack.prod.js webpack生產配置
config---項目環境配置
scripts---node腳本文件
build.js 生產環境使用腳本
start.js 開發環境使用腳本
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)編寫開發模式運行腳本

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)在入口編寫一點內容

src/index.js
console.log('hello world');

5)執行npm run build 命令,生成打包目錄dist
4.配置開發服務器-webpack-dev-server
1)安裝dev服務器和合并配置工具


npm install webpack-dev-server webpack-merge -D

  1. 改寫webpack配置文件,common文件導出一個可傳參數的基本配置生成器, 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會實時編譯代碼到內存

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, 瀏覽器自動彈出窗口

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
禁止轉載,如需轉載請通過簡信或評論聯系作者。

推薦閱讀更多精彩內容