一、安装
1.npm install webpack -g（以命令行工具的形式使用webpack时，在全局安装webpack）
2.npm install webpack --save-dev（编写自己的构建脚本，或由项目指定需要依赖的webpack，本地安装，webpack只是构建工具的角色，应该安装在dev－dependencies中）
3.npm install babel-core babel-loader --save-dev（添加加载器，将进行解析，以便浏览器使用.jsx和.scss等文件）
二、webpack文件
var path = require('path');// 用于拼接路径
module.exports = {
entry: path.resolve(__dirname, 'index.jsx'),// 指定项目入口
// webpack打包后的js文件路径及名称
output: {
path: path.resolve(__dirname, 'build'),// 输出路径
filename: '/js/[name].[chunkhash:8].js' // 输出的文件名
},
// 配置模块使用的加载器
module: {
loaders: [
{
// 假设我们拥有一个编译sass加载器
// 匹配字符串
test:/\.scss$/,
// 使用的加载器，不可以省略加载器的后缀-loader
loaders:['style-loader', 'css-loader', 'sass-loader']
},
{
test:/\.jsx?$/,
loaders: ['babel-loader']
}
},
//配置webpack需要依赖的插件的地方
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",//可以设置已哪个html文件为模版
filename: "./index.html"//可以设置html输出的路径和文件名
}),
new webpack.DefinePlugin({//最小化压缩 React
'process.env':{
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
}),
]
}
三、webpack配置中将将路径改为相对路径'./'
如何使用@去取代相对路径呢？
alias: {
'react-native': 'react-native-web',
'@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理},
在alias里面加入 '@': path.join(__dirname, '..', 'src') //使用@符号做相对路径处理
