裝置和運用webpack
1.初始化項目
mkdir react-redux && cd react-redux
npm init -y2.裝置webpack
npm i webpack -Dnpm i -D 是 npm install –save-dev 的簡寫，是指裝置模塊並保留到 package.json 的 devDependencies中，重要在開闢環境中的依靠包.
假如運用webpack 4+ 版本，還需要裝置 CLI。
npm install -D webpack webpack-cli3.新建一下項目構造
react-redux
|- package.json
+ |- /dist
+ |- index.html
|- /src
|- index.jsindex.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 -D2.在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.裝置babelnpm 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-merge2.新建一個名為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-domnpm 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"
})
]
});