使用webpack搭建react專案 webpack-react-project
webpack-react-project 使用webpack搭建react專案
webpack搭建react專案 github原始碼
具體配置資訊參照package.json和webpack.config.js
首先建立一個專案資料夾,並進入到該資料夾：
mkdir react-webpack-project- 初始化專案：npm init 根據提示建立package.json
- 通過NPM安裝webpack和webpack-cli,其中-D相當於--save-dev: npm install webpack webpack-cli -D，安裝完成後可在package.json中檢視具體的安裝版本資訊：
- webpack4 以上的版本，會預設配置,比如預設的入口檔案，預設的輸出檔案，因此暫時無需額外的配置
- 在根目錄下新建src資料夾，並在其中建立index.js檔案，在檔案中寫入console.log('hello react');
6.直接通過npm run dev package.json 中scripts中配置
"scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }- npm run dev,成功打包後，發現專案裡多了一個dist資料夾，可通過npm run dev/npm run build分別打包對比生成的main.js的檔案大小，npm run build,你會發現main.js檔案小了很多
配置babel編譯es6的程式碼，在根目錄下新建.babelrc檔案，並寫入以下程式碼：
9.通過npm安裝babel{ "presets": [ "env" ] }
npm install babel-core babel-loader babel-preset-env --save-dev- 為方便管理，將webpack.config.js單獨建立，與package.json分開，在根目錄下建立webpack.config.js檔案，寫入如下程式碼：
// webpack v4 const path = require('path'); module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader" } } ] } };
通過npm run dev發現babel版本過低報錯，因此將babel版本升級，安裝完成後npm run dev能進行正常打包
npm i [email protected] -D在dist資料夾下新建index.html檔案，並寫入以下內容，其中引用了css檔案
Hello, world!在src檔案下新建style.css,寫入任意css表示式，並將其引用至index.js中,再次通過npm run dev出現報錯，提示“You may need an appropriate loader to handle this file type”，需要安裝配置css-loader
div{background-color:red};
import "./style.css";
console.log("hello, world");通過npm下載css-loader和style-loader:
npm install css-loader style-loader -D
另外還需安裝extract-text-webpack-plugin外掛(通過@next安裝新版本，低版本在webpack4上無法正常執行):npm install --save-dev [email protected]安裝完成後對webpack.config.js進行配置,在rules中新增css-loader配置，引入extract-text-webpack-plugin並配置plugins，配置完成後通過npm run dev可正常進行編譯
const ExtractTextPlugin = require('extract-text-webpack-plugin'); { test: /\.css$/, use: ExtractTextPlugin.extract( { fallback: 'style-loader', use: ['css-loader'] }) } plugins:[ new ExtractTextPlugin("styles.css") ]在src下新建index.html檔案：
<html> <head> <link rel="stylesheet" href="style.css"> </head> <body> <div>Hello, world!</div> <script src="main.js"></script> </body> </html>安裝html-webpack-plugin外掛，並進行相應的配置：
npm install extract-text-webpack-plugin -D webpack.config.js中的配置資訊如下： const HtmlWebpackPlugin = require('html-webpack-plugin'); plugins:[ new ExtractTextPlugin("styles.css"), new HtmlWebpackPlugin({ inject: false, hash: true, template: './src/index.html', filename: 'index.html' }) ]- 基本配置已完成，可將dist資料夾下的內容刪除後，執行npm run dev進行編譯。詳細配置參照package.json及webpack.config.js檔案。
通過配置webpack-dev-server開啟web伺服器,通過npm安裝webpack-dev-server:
npm install webpack-dev-server -D
安裝完成後，在webpack.config.js中配置devServer:devServer:{ contentBase:path.resolve(__dirname,'dist'), publicPath:'/', port:8080, historyApiFallback:true }最後，在package.json的scripts指令碼中寫入:
"start": "webpack-dev-server --config webpack.config.js"
現在，就可以通過npm run start命令啟動專案啦～～～