在React中使用相对目录引入模块后,如果在后期想要重新调整目录文件将十分复杂,这时候我们可以在webpack的配置文件中为一些共有的目录设定别名,这样在修改文件目录的时候只需要修改webpack配置文件即可
如何添加目录的别名
在webpack.config.js中添加resolve模块,在模块中为一个路径起一个别名
resolve: {
alias: {
page: path.resolve(__dirname,'src/page')
// page是起的别名,后面是该别名指向的目录
}
}
这样在写相对目录的时候就可以用别名来替代路径,下面是整个webpack.config.js的代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
module.exports = {
entry: './src/app.jsx',
output: {
path: path.resolve(__dirname, 'dist'),
publicPath:'/dist/',
filename: 'js/app.js'
},
+ resolve: {
+ alias: {
+ page: path.resolve(__dirname,'src/page')
+ }
+ },
plugins: [
// 处理HTML文件
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
// 提出css文件
new ExtractTextPlugin("css/[name].css"),
// 提出公共模块
new webpack.optimize.CommonsChunkPlugin({
name:'common',
filename:'js/base.js'
})
],
module: {
rules: [
// react语法处理
{
test: /\.m?jsx$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env','react']
}
}
},
// css语法处理
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
// sass文件的处理
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
'sass-loader',
],
},
// 图片配置
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
},
},
],
},
// 字体图标配置
{
test: /\.(woff|woff2|eot|ttf|otf|svg)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'resource/[name].[ext]'
},
},
],
},
]
},
devServer: {
port:8086
}
};