流媒体视频服务器webpack3+React的高防配置全解

流媒体视频服务器webpack3+React 的高防配置全解

高防服务器租用 请联系：锐辉网络--小敏 ：.....................2853898501

webpack3 的配置相对于webpack2 又有了一些新的变化，这里讲其记录下来，备查 。
package.json 的完整文件在结尾 。
1. 安装
npm init
yarn add webpack webpack-dev-server -D
2. 配置简单输入输出
webpack.config.js
module.exports = {
entry: {
ventor: ['react','react-dom'],
index: [
'babel-polyfill',
'react-hot-loader/patch',
path.resolve(__dirname,"src/index.js")
output: {
path: path.resolve(__dirname, "dist"),
filename:"js/[name].js",
devtool:'source-map'
将所用到的库单分离出来，在多页面应用中，对减少文件体积很有用 。
react-hot-loader 的3.0 版本的get start 刚刚更新 。 单打包了补丁，所以react-hot-loader 作为一个生产依赖安装 。
这样基本的输入输出就完成了 。
3. webpack-dev-server
devServer: {
hot:true,// 热重载
inline:true,// 启用inline 模式
port: 46480,
contentBase: path.resolve(__dirname, "dist"),
proxy: {
"/api": {
target:"xxxxx",
secure:false,// 处理https
changeOrigin:true, // 跨域
4. loaders
webpack 将所有的文件都当做js文件处理，所以配置加载器
4.1 安装loader
yarn add babel-loader less-loader postcss-loader css-loader style-loader -D
yarn add react-hot-loader
4.2 配置loader
注意，loader 中的 name 都是相对于 output中的path 的 。
postcss-loader是对css 文件做一些预处理，常用就是添加css3属性前缀，用到 autoprefixer 插件 。 配置postcss-loader ，需要 postcss.config.js 文件 。
babel-loader 需要配置option选项，这里单提出去，放置到.babelrc 文件中 。
webpack.config.js
module: {
rules: [{
test: /.js$/,
use: [
"react-hot-loader/webpack",
"babel-loader",
exclude: path.resolve(__dirname, "node_modules")
test: /\.css$/
use: [
"style-loader",
"css-loader",
"postcss-loader"
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"postcss-loader",
"less-loader"
test: /\.(gif|png|jpe?g)$/,
use: [{
loader:"file-loader",
options: {
name:"static/img/[name].[ext]"
test: /\.(ttf|eot|svg|woff)(\?(\w|#)*)?$/,
use: [{
loader:"file-loader",
options: {
name:"static/font/[name].[ext]"
.babelrc
"presets": ["es2015", "stage-0", "react"],
"plugins": ["transform-decorators-legacy"]
transform-decorators-legacy 这个插件用来转化es7 中的装饰器，比如 autobind，connect 等 。
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
5. 插件
插件是webpack 中非常重要的一部分 。
5.1 HtmlWebpackPlugin 插件 。
自动生成html文件，并自动引入script文件 。有几个页面就要new 几个插件， 自动引入同名的js文件。
const HtmlWebpackPlugin = require("html-webpack-plugin");
newHtmlWebpackPlugin({
template: path.resolve(__dirname, "src/index.html"),
name:"index",
title:"webpack config cli",
filename:"index.html",
inject:true,
5.2 CommonsChunkPlugin 插件将单的部分作为chunk 提出去，减小文件体积，这里的name 要和 entry中对应 。
monsChunkPlugin({
name:'vendor',
filename:'js/vendor.js'
5.3 webpack 模块热替换插件 HotModuleReplacementPlugin
newwebpack.HotModuleReplacementPlugin()
5.4 ExtractTextPlugin 分离css 文件
在这个插件加载以前，css 文件是放在js文件中，在解释js时，将文本插入到style节点中 。
使用这个插件以后，就直接可以单分离css 文件 。
但是在开发环境中不要使用，会影响热重载的速度。
ExtractTextPlugin 的插件配置相对复杂 。包裹loaders，注意这里已经不能再使用style-loader了，因为提取css的任务插件完成了 。当提取失败时，使用style-loader 。
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// loader部分
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use: [
"css-loader",
"postcss-loader"
test: /\.less$/,
use: ExtractTextPlugin.extract({
fallback:"style-loader",
use: [
"css-loader",
"postcss-loader",
"less-loader"
// 插件部分
newExtractTextPlugin({
filename:"css/index.css"
6. 其他
extensions：用于省略后缀名
alias 处理别名 。
resolve: {
extensions: [" ",".js",".jsx",".css",".less"],
alias: {
components: path.resolve(__dirname, 'src/components/'),
css: path.resolve(__dirname, "src/css/"),
model: path.resolve(__dirname, 'src/model/'),
store: path.resolve(__dirname, 'src/store/')
7.package.json
"name":"webpack-react-cli",
"version":"1.0.0",
"description":"",
"main":"webpack.config.js",
"scripts": {
"test":"echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open",
"build":"webpack -w"
"author":"",
"license":"ISC",
"devDependencies": {
"autoprefixer":"^7.1.2",
"babel-core":"^6.25.0",
"babel-loader":"^7.1.1",
"babel-plugin-transform-decorators-legacy":"^1.3.4",
"babel-preset-es2015":"^6.24.1",
"babel-preset-react":"^6.24.1",
"babel-preset-stage-0":"^6.24.1",
"css-loader":"^0.28.4",
"extract-text-webpack-plugin":"^3.0.0",
"file-loader":"^0.11.2",
"html-webpack-plugin":"^2.30.1",
"less":"^2.7.2",
"less-loader":"^4.0.5",
"postcss-loader":"^2.0.6",
"style-loader":"^0.18.2",
"webpack":"^3.0.0",
"webpack-dev-server":"^2.5.0"
"dependencies": {
"babel-polyfill":"^6.23.0",
"core-decorators":"^0.19.0",
"prop-types":"^15.5.10",
"react:"^15.6.1",
"react-dom":"^15.6.1",
"react-hot-loader":"^3.0.0-beta.7"