React | 使用webpack構建React項目

配置 React 項目,需要完成的工作:

1、編譯 jsx,es6,scss 等資源

2、自動引入靜態資源到 html 頁面

3、實時編譯和刷新瀏覽器

4、按指定模塊化規范自動包裝模塊

5、自動給 css 添加瀏覽器內核前綴

6、按需打包合并 js、css


根據 webpack 文檔編寫最基本的 webpack 配置,直接使用 node api 的方式

/* webpack.config.js */

varwebpack= require('webpack');

//輔助函數?varutils= require('./utils');

varfullPath=utils.fullPath;

varpickFiles=utils.pickFiles;

//項目根路徑?varROOT_PATH=fullPath('../');

//項目源碼路徑?varSRC_PATH=ROOT_PATH+'/src';

//產出路徑?varDIST_PATH=ROOT_PATH+'/dist';

//是否是開發環境?var__DEV__= process.env.NODE_ENV!=='production';

// conf

varalias=pickFiles({

id:/(conf\/[^\/]+).js$/,

pattern:SRC_PATH+'/conf/*.js'

});

// components

alias= Object.assign(alias,pickFiles({

id:/(components\/[^\/]+)/,

pattern:SRC_PATH+'/components/*/index.js'

}));

// reducers

alias= Object.assign(alias,pickFiles({

id:/(reducers\/[^\/]+).js/,

pattern:SRC_PATH+'/js/reducers/*'

}));

// actions

alias= Object.assign(alias,pickFiles({

id:/(actions\/[^\/]+).js/,

pattern:SRC_PATH+'/js/actions/*'

}));

varconfig= {

context:SRC_PATH,

entry: {

app: ['./pages/app.js']

},

output: {

path:DIST_PATH,

filename:'js/bundle.js'

},

module: {},

resolve: {

alias:alias

},

plugins: [

newwebpack.DefinePlugin({

// http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack

"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||'development')

})

]

};

module.

exports=config;

/* webpack.dev.js */

varwebpack= require('webpack');

varWebpackDevServer= require('webpack-dev-server');

varconfig= require('./webpack.config');

varutils= require('./utils');

varPORT=8080;

varHOST=utils.getIP();

varargs= process.argv;

varhot=args.indexOf('--hot') > -1;

vardeploy=args.indexOf('--deploy') > -1;

//本地環境靜態資源路徑?varlocalPublicPath='http://'+HOST+':'+PORT+'/';

config.output.publicPath=localPublicPath;

config.entry.app.unshift('webpack-dev-server/client?'+localPublicPath);

newWebpackDevServer(webpack(config), {

hot:hot,

inline:true,

compress:true,

stats: {

chunks:false,

children:false,

colors:true

},

// Set this as true if you want to access dev server from arbitrary url.

// This is handy if you are using a html5 router.

historyApiFallback:true,

}).listen(

PORT,HOST,function() {

console.log(localPublicPath);

});


編譯 jsx、es6、scss 等資源:

● 使用 bael 和 babel-loader 編譯 jsx、es6

● 安裝插件: babel-preset-es2015 用于解析 es6

● 安裝插件:babel-preset-react 用于解析 jsx


// 首先需要安裝 babel

$ npm i babel-core

// 安裝插件

$ npm i babel-preset-es2015babel-preset-react

// 安裝 loader

$ npm i babel-loader

在項目根目錄創建 .babelrc 文件:

{

"presets": ["es2015","react"]

}

在 webpack.config.js 里添加:

//使用緩存varCACHE_PATH= ROOT_PATH +'/cache';

// loaders

config.module.loaders= [];

//使用babel編譯jsxes6

config.module.loaders.push({

test:/\.js$/,

exclude:/node_modules/,

include: SRC_PATH,

//這里使用?loaders,因為后面還需要添加?loader

loaders: ['babel?cacheDirectory='+CACHE_PATH]

});

接下來使用 sass-loader 編譯 sass:

$ npm i sass-loader node-sasscss-loader style-loader

●css-loader 用于將 css 當做模塊一樣來 import

●style-loader 用于自動將 css 添加到頁面

在 webpack.config.js 里添加:

//編譯?sass

config.module.loaders.push({

test:/\.(scss|css)$/,

loaders: ['style','css','sass']

});

自動引入靜態資源到相應 html 頁面

● 使用 html-webpack-plugin

$ npm i html-webpack-plugin

在 webpack.config.js 里添加:

// html?頁面?varHtmlwebpackPlugin= require('html-webpack-plugin');

config.

plugins.push(

newHtmlwebpackPlugin({

filename:'index.html',

chunks: ['app'],

template: SRC_PATH +'/pages/app.html'

})

);

打包合并 js、css

webpack 默認將所有模塊都打包成一個 bundle,并提供了 Code Splitting 功能便于我們按需拆分。在這個例子里我們把框架和庫都拆分出來:

在 webpack.config.js 添加:

config.entry.lib= [

'react','react-dom','react-router',

'redux','react-redux','redux-thunk'

]

config.output.filename='js/[name].js';

config.

plugins.push(

newwebpack.optimize.CommonsChunkPlugin('lib','js/lib.js')

);

//別忘了將?lib?添加到?html?頁面

// chunks: ['app', 'lib']

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。