使用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 extract-text-webpack-plugin@next安裝完成後對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命令啟動項目啦～～～
使用webpack搭建react項目 webpack-react-project