webpack2中react開發配置的示例分析
小編給大家分享一下webpack 2中react開發配置的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創新互聯-專業網站定制、快速模板網站建設、高性價比濰坊網站開發、企業建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式濰坊網站制作公司更省心,省錢,快速模板網站建設找我們，業務覆蓋濰坊地區。費用合理售后完善，十年實體公司更值得信賴。
基于webpack 2.3的標準語法，包含了less變量替換、React組件熱加載、第三庫單獨輸出、區分生產與開發環境等常用配置。
'use strict'
module.exports = function( env ) {
// 生成環境下webpack使用-p參數開啟代碼壓縮
// webpack[-dev-server]使用--env dev參數指定編譯環境
var isDev = env == 'dev';
var path = require( 'path' );
var webpack = require( 'webpack' );
var CleanWebpackPlugin = require( 'clean-webpack-plugin' );
var CopyWebpackPlugin = require( 'copy-webpack-plugin' );
var HtmlWebpackPlugin = require( 'html-webpack-plugin' );
var WebkitPrefixer = require( 'autoprefixer' );
var WebpackMd5Hash = require( 'webpack-md5-hash' );
var BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
var sourcedir = path.resolve( __dirname, 'src' );// 源碼和資源文件的放置位置
var outputdir = path.resolve( __dirname, 'build' );// 編譯結果的放置位置
var webContextRoot = '/myreact/';// 應用的實際訪問路徑，默認是'/'
// antd的圖標字體文件的實際訪問路徑，利用less-load的變量替換功能
var antd_fonticon = webContextRoot + 'assets/antd_fonticon/iconfont';
var hasValue = function( item ) { return item != null; };
return {
//context: path.resolve( __dirname ),
devtool: 'source-map',
devServer: {
host: '0.0.0.0',
port: 8082,
historyApiFallback: true
},
resolve: {
// 讓less-loader等插件能找到以~相對定位的資源
modules: [sourcedir, 'node_modules']
},
entry: {
main: [
// 編譯新版本js的新api(如Promise)，主要是讓IE11能夠執行編譯后的代碼
'babel-polyfill',
//使用react-hot-loader@3.0.0-beta.6，
// 搭配webpack-dev-server --hot命令實現react組件的hot reload
isDev ? 'react-hot-loader/patch' : null,
path.resolve( sourcedir, 'main.jsx' )].filter( hasValue ),
// 第三方庫匯總輸出
vendor: ['bootstrap/dist/css/bootstrap.min.css', 'react',
'react-dom', 'react-router', 'redux', 'react-redux',
'react-router-redux', 'moment', 'lodash', 'immutable', 'whatwg-fetch',
// 只含antd的js部分
'antd',
// 各控件還需引入各自的樣式文件
'antd/lib/style/index.less']
},
output: {
path: outputdir,
filename: isDev ? 'js/[name].js' : 'js/[name]_[chunkhash:8].js',
// 使用require.ensure造成的延遲加載的代碼文件
chunkFilename: isDev ? 'js/chunk_[id]_[name].js'
: 'js/chunk_[name]_[chunkhash:8].js',
publicPath: webContextRoot
},
module: {
rules: [{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
use: [{
// 編譯新版本js語法為低版本js語法
loader: 'babel-loader',
options: {
presets: [
// 編譯es2015版本的js
['babel-preset-es2015', {
modules: false
}], 'babel-preset-stage-2',
// 編譯jsx
'babel-preset-react'],
plugins: [// 支持熱加載react組件
isDev ? 'react-hot-loader/babel' : null,
// 減少重復的編譯后的輔助方法
'babel-plugin-transform-runtime',
// 按需加載組件的代碼和樣式
['babel-plugin-import', {
libraryName: 'antd',
style: true
}]].filter( hasValue )
}
}]
}, {
test: /\.css$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
// 第三方組件未以module方式引入css，所以不能在全局開啟css module
modules: false
}
},
{ loader: 'postcss-loader', options: { plugins: [WebkitPrefixer] } }]
}, {
test: /\.less$/,
use: ['style-loader',
{
loader: 'css-loader',
options: {
modules: false
}
},
{ loader: 'postcss-loader', options: { plugins: [WebkitPrefixer] } },
{
loader: 'less-loader',
options: {
modules: false,
modifyVars: {
// 替換antd用到的字體文件路徑
"icon-url": JSON.stringify( antd_fonticon )
}
}
}]
}, {
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
// 編碼為dataUrl的最大尺寸
limit: 10000,
// 輸出路徑，相對于publicPath
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/font-woff',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/octet-stream',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/vnd.ms-fontobject',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}, {
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
mimetype: 'application/svg+xml',
outputPath: 'assets/',
name: isDev ? '[name].[ext]' : '[name]_[hash:8].[ext]'
}
}
}]
},
plugins: [
// momentjs包含大量本地化代碼，需篩選
new webpack.ContextReplacementPlugin( /moment[\/\\]locale$/, /en-ca|zh-cn/ ),
new webpack.optimize.OccurrenceOrderPlugin( true ),
// 復制無需編譯的文件至輸出目錄
new CopyWebpackPlugin( [{
from: path.resolve( sourcedir, 'assets' ),
to: 'assets'
}] ),
// 修復webpack的chunkhash不以chunk文件實際內容為準的問題
new WebpackMd5Hash(),
// 單獨打包輸出第三方組件，和webpack生成的運行時代碼
new webpack.optimize.CommonsChunkPlugin( {
name: ['vendor', 'manifest']
}),
// 自動填充js、css引用進首頁
new HtmlWebpackPlugin( {
title: 'wzp react',
template: path.resolve( sourcedir, 'index.html' ),
inject: 'body' // Inject all scripts into the body
}),
// 設置環境變量
new webpack.DefinePlugin( {
process: {
env: {
// process.env.NODE_ENV==="production"
// 應用代碼里，可憑此判斷是否運行在生產環境
NODE_ENV: isDev ? JSON.stringify( 'development' )
: JSON.stringify( 'production' )
}
}
}),
// print more readable module names on HMR updates
isDev ? new webpack.NamedModulesPlugin() : null,
// 先清理輸出目錄
isDev ? null : new CleanWebpackPlugin( [outputdir] ),
// 排除特定庫
isDev ? null : new webpack.IgnorePlugin( /.*/, /react-hot-loader$/ ),
// 輸出報告，查看第三方庫的大小
isDev ? null : new BundleAnalyzerPlugin(
{
analyzerMode: 'static',
reportFilename: 'report.html',
openAnalyzer: true,
generateStatsFile: false
})
].filter( hasValue )
}
};以上是“webpack 2中react開發配置的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注創新互聯行業資訊頻道！
網頁標題：webpack2中react開發配置的示例分析
URL地址：http://m.newbst.com/article6/jedgig.html
成都網站建設公司_創新互聯，為您提供建站公司、營銷型網站建設、網頁設計公司、靜態網站、Google、網站維護
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
- 移動網站建設需要注意哪些？ 2013-11-20
- 成都移動網站建設中長滾動頁面的優勢 2020-08-22
- 移動網站建設需要注意什么 2021-09-14
- 移動網站建設的核心內容是什么 2021-09-26
- 移動網站建設時應該注意的幾大事項 2016-09-11
- 淺析移動網站建設要注意哪些細節 2016-11-04
- 汕頭移動網站建設：做移動網站這些問題必須要引起注意！ 2021-08-31
- 移動網站建設需要避免哪些陷阱 2016-08-25
- 企業手機端移動網站建設有哪些重要性！ 2022-10-25
- 做移動網站建設應注意哪幾點？經驗種草 2022-08-07
- 深圳移動網站建設過程有哪些需要引起重視呢 2021-10-24
- 創新互聯網站建設步入移動網站建設行業 2021-12-19