1.初始化項目
mkdir react-redux && cd react-reduxnpm init -y
2.安裝webpack
npm i webpack -D
npm i -D 是 npm install --save-dev 的簡寫，是指安裝模塊并保存到 package.json 的 devDependencies中，主要在開發環境中的依賴包. 如果使用webpack 4+ 版本，還需要安裝 CLI。
npm install -D webpack webpack-cli
3.新建一下項目結構
react-redux |- package.json+ |- /dist+ |- index.html |- /src |- index.js
index.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="root"></div><script src="bundle.js"></script></body></html>
index.js
document.querySelector('#root').innerHTML = 'webpack使用';非全局安裝下的打包。
node_modules/.bin/webpack src/index.js --output dist/bundle.js --mode development
打開dist目錄下的html顯示 webpack使用
配置webpack
1.使用配置文件
const path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }}; 運行命令: node_modules/.bin/webpack --mode production 可以以進行打包 2.NPM 腳本(NPM Scripts) 在在 package.json 添加一個 npm 腳本(npm script)： "build": "webpack --mode production" 運行 npm run build 即可打包
使用webpack構建本地服務器
webpack-dev-server 提供了一個簡單的 web 服務器，并且能夠實時重新加載。
1.安裝 npm i -D webpack-dev-server 修改配置文件webpack.config.js
const path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 port:3000, open:true,//自動打開瀏覽器 }};運行 webpack-dev-server --progress ,瀏覽器打開localhost:3000,修改代碼會實時顯示修改的結果. 添加scripts腳本,運行 npm start 自動打開 http://localhost:8080/
"start": "webpack-dev-server --open --mode development"
啟動webpack-dev-server后，在目標文件夾中是看不到編譯后的文件的,實時編譯后的文件都保存到了內存當中。因此使用webpack-dev-server進行開發的時候都看不到編譯后的文件
2.熱更新
配置一個webpack自帶的插件并且還要在主要js文件里檢查是否有module.hot
plugins:[ //熱更新,不是刷新 new webpack.HotModuleReplacementPlugin() ],
在主要js文件里添加以下代碼
if (module.hot){ //實現熱更新 module.hot.accept();}在webpack.config.js中開啟熱更新
devServer:{ contentBase: "./dist",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 port:3000, open:true,//自動打開瀏覽器 hot:true //開啟熱更新 },熱更新允許在運行時更新各種模塊，而無需進行完全刷新.
配置Html模板
1.安裝html-webpack-plugin插件
npm i html-webpack-plugin -D
2.在webpack.config.js里引用插件
const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件緩存,每次都會生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 port:3000, open:true,//自動打開瀏覽器 hot:true //開啟熱更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //會在打包好的bundle.js后面加上hash串 }) ]}; 運行 npm run build 進行打包,這時候每次npm run build的時候都會在dist目錄下創建很多打好的包.應該每次打包之前都將dist目錄下的文件清空,再把打包好的文件放進去,這里使用clean-webpack-plugin插件.通過 npm i clean-webpack-plugin -D 命令安裝.然后在webpack.config.js中引用插件.
const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');let CleanWebpackPlugin=require('clean-webpack-plugin');module.exports={ entry:'./src/index.js', output:{ //添加hash可以防止文件緩存,每次都會生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve('dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true,//實時刷新 port:3000, open:true,//自動打開瀏覽器 hot:true //開啟熱更新 }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //會在打包好的bundle.js后面加上hash串 }), //打包前先清空 new CleanWebpackPlugin('dist') ]};之后打包便不會產生多余的文件.
編譯es6和jsx
1.安裝babel npm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -D babel-loader: babel加載器 babel-preset-env : 根據配置的 env 只編譯那些還不支持的特性。 babel-preset-react: jsx 轉換成js
2.添加.babelrc配置文件
{ "presets": ["env", "stage-0","react"] //從左向右解析}3.修改webpack.config.js
const path=require('path');module.exports={ entry:'./src/index.js', output:{ filename:'bundle.js', path:path.resolve(__dirname,'dist') }, //以下是新增的配置 devServer:{ contentBase: "./dist",//本地服務器所加載的頁面所在的目錄 historyApiFallback: true,//不跳轉 inline: true//實時刷新 }, module:{ rules:[ { test://.js$/, exclude:/(node_modules)/, //排除掉nod_modules,優化打包速度 use:{ loader:'babel-loader' } } ] }};開發環境與生產環境分離
1.安裝 webpack-merge
npm install --save-dev webpack-merge
2.新建一個名為webpack.common.js文件作為公共配置,寫入以下內容：
const path=require('path');let webpack=require('webpack');let HtmlWebpackPlugin=require('html-webpack-plugin');let CleanWebpackPlugin=require('clean-webpack-plugin');module.exports={ entry:['babel-polyfill','./src/index.js'], output:{ //添加hash可以防止文件緩存,每次都會生成4位hash串 filename:'bundle.[hash:4].js', path:path.resolve(__dirname,'dist') }, plugins:[ new HtmlWebpackPlugin({ template:'./src/index.html', hash:true, //會在打包好的bundle.js后面加上hash串 }), //打包前先清空 new CleanWebpackPlugin('dist'), new webpack.HotModuleReplacementPlugin() //查看要修補(patch)的依賴 ], module:{ rules:[ { test://.js$/, exclude:/(node_modules)/, //排除掉nod_modules,優化打包速度 use:{ loader:'babel-loader' } } ] }};3.新建一個名為webpack.dev.js文件作為開發環境配置
const merge=require('webpack-merge');const path=require('path');let webpack=require('webpack');const common=require('./webpack.common.js');module.exports=merge(common,{ devtool:'inline-soure-map', mode:'development', devServer:{ historyApiFallback: true, //在開發單頁應用時非常有用，它依賴于HTML5 history API，如果設置為true，所有的跳轉將指向index.html contentBase:path.resolve(__dirname, '../dist'),//本地服務器所加載的頁面所在的目錄 inline: true,//實時刷新 open:true, compress: true, port:3000, hot:true //開啟熱更新 }, plugins:[ //熱更新,不是刷新 new webpack.HotModuleReplacementPlugin(), ],});4.新建一個名為webpack.prod.js的文件作為生產環境配置
const merge = require('webpack-merge'); const path=require('path'); let webpack=require('webpack'); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode:'production', plugins: [ new UglifyJSPlugin() ] });配置react
1.安裝react、
react-dom npm i react react-dom -S
2.新建App.js,添加以下內容.
import React from 'react';class App extends React.Component{ render(){ return (<div>佳佳加油</div>); }}export default App;3.在index.js添加以下內容.
import React from 'react';import ReactDOM from 'react-dom';import {AppContainer} from 'react-hot-loader';import App from './App';ReactDOM.render( <AppContainer> <App/> </AppContainer>, document.getElementById('root'));if (module.hot) { module.hot.accept();}4.安裝 react-hot-loader
npm i -D react-hot-loader
5.修改配置文件 在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch，一定要寫在entry 的最前面，如果有 babel-polyfill 就寫在babel-polyfill 的后面
6.在 .babelrc 里添加 plugin, "plugins": ["react-hot-loader/babel"]
處理SASS
1.安裝 style-loader css-loader url-loader
npm install style-loader css-loader url-loader --save-dev
2.安裝 sass-loader node-sass
npm install sass-loader node-sass --save-dev
3.安裝 mini-css-extract-plugin ,提取單獨打包css文件
npm install --save-dev mini-css-extract-plugin
4.配置webpack配置文件
webpack.common.js
{ test://.(png|jpg|gif)$/, use:[ "url-loader" ]},webpack.dev.js
{ test://.scss$/, use:[ "style-loader", "css-loader", "sass-loader" ]}webpack.prod.js
const merge = require('webpack-merge'); const path=require('path'); let webpack=require('webpack'); const MiniCssExtractPlugin=require("mini-css-extract-plugin"); const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const common = require('./webpack.common.js'); module.exports = merge(common, { mode:'production', module:{ rules:[ { test://.scss$/, use:[ // fallback to style-loader in development process.env.NODE_ENV !== 'production' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader", "sass-loader" ] } ] }, plugins: [ new UglifyJSPlugin(), new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: "[name].css", chunkFilename: "[id].css" }) ] });以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
