Установите и используйте веб-пакет
1. Инициализировать проект
mkdir react-redux && cd react-redux
npm init -y
2. Установите веб-пакет
npm i webpack -D
npm i -D — это сокращение от npm install --save-dev, которое относится к установке модулей и их сохранению в devDependencies package.json, в основном в среде разработки. Если вы используете 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
Откройте отображение html в каталоге distwebpack使用
настроить веб-пакет
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)
Добавьте скрипт npm в package.json:
"build": "webpack --mode production"
бегатьnpm run buildготов к упаковке
Создайте локальный сервер с помощью веб-пакета
webpack-dev-server предоставляет простой веб-сервер с перезагрузкой в реальном времени.
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, и код модификации будет отображать измененные результаты в режиме реального времени.
Добавить скрипты скрипт, запуститьnpm startавтоматически открыватьhttp://localhost:8080/
"start": "webpack-dev-server --open --mode development"
После запуска webpack-dev-server скомпилированные файлы не видны в целевой папке, а скомпилированные в реальном времени файлы сохраняются в памяти. Поэтому скомпилированные файлы не видны при разработке с помощью webpack-dev-server.
2. Горячее обновление
Настройте плагин, который поставляется с веб-пакетом, а также проверьте наличие module.hot в основном файле js.
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 -плагин плагин.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. Установите вавилонnpm i babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-0 -DBabel-загрузчик: загрузчик Babel
babel-preset-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()
]
});
настроить реакцию
1. Установите реакцию, реакцию-домnpm i react react-dom -S2. Создайте новый 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. Измените файл конфигурации
Добавьте react-hot-loader/patch к значению записи webpack.config.js, обязательно напишите его перед записью, если есть babel-polyfill, напишите его после babel-polyfill
6. Добавьте плагин в .babelrc,"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.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"
})
]
});