第一步创建空工程
npm init
将项目依赖包写入package.json，如下（会说明每个包的作用）这是本人习惯的依赖包，并没有做环境分离
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.19",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^4.3.1",
"style-loader": "^0.21.0",
"webpack": "^4.16.3",
"webpack-dev-server": "^3.1.5"
},
"dependencies": {
"antd": "^3.7.3",
"axios": "^0.18.0",
"babel-plugin-import": "^1.8.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-runtime": "^6.26.0",
"h2m": "^0.6.0",
"markdown-react-js": "^1.0.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-quill": "^1.3.1",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^4.0.0",
"redux-saga": "^0.16.0",
"webpack-cli": "^3.1.0"
}dev开发环境相关：
babel就是用来转换各个版本的js代码的
"babel-core": 核心 不用多说, "babel-loader": loader就是操作者的意思吧，转换操作都由这个包执行, "babel-plugin-transform-object-rest-spread": 这个是es6扩展符支持插件，例如...三个点, "babel-preset-env": 各个preset版本的集合，自动调用, "babel-preset-react": 识别React组件, "clean-webpack-plugin": 每次打包之后要把旧文件清楚（因为每次生成的文件会有带hash，会产生文件堆积）, "css-loader": 识别css, "extract-text-webpack-plugin": 分离成单独的css文件, "file-loader": css中图片支持, "html-loader": 页面中src图片支持, "html-webpack-plugin": 生成html，可以设置对应模板, "image-webpack-loader": 压缩图片, "style-loader": 将css，添加到html, "webpack": 不多说, "webpack-dev-server": 开发测试运行服务器
prod生产环境相关
"antd": 蚂蚁金服ui库 需要的添加, "axios": 类似ajax功能的网络请求包, "babel-plugin-import": 蚂蚁金服依赖包, "babel-plugin-transform-runtime": 可以自动添加需要的依赖从env中, "babel-runtime": 不必多说, "h2m": HTML转MD 需要的添加, "markdown-react-js": MD转HTML 需要的添加, "react": 不必多说, "react-dom": 不必多说, "react-quill": 富文本编辑器 需要的添加, "react-redux": 不必多说, "react-router-dom": 路由, "redux": redux数据管理, "redux-saga": redux内部请求, "webpack-cli": 不必多说
第二步 webpack.config和babelrc文件
// 生成html
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 分离css
const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 引入webpack
const webpack = require('webpack');
// 清楚旧文件
const CleanWebpackPlugin = require('clean-webpack-plugin');
// 指定旧文件清楚路径
const pathsToClean = [
'dist'
];
module.exports = {
entry: {
"app.bundle": './src/index.js' // 前面为指定的name即别名，后面为路径
},
output: {
path: __dirname + '/dist',
filename: 'js/[name].[hash].js' // name为前面指定的别名，chunkhash为hash值，不重复保证最新的js被加载
},
plugins: [
new CleanWebpackPlugin(pathsToClean), // 放在第一个执行
new HtmlWebpackPlugin({
template: './src/index.html', // 模板文件
title: "again", // 生成文件的title（使用模板文件后title就没用了）
minify: {
collapseWhitespace: true // 是否去掉多余空格
},
hash: true // 在生成文件后添加hash以便更新
}),
new ExtractTextPlugin('style.css'), // 生成的css文件名,
new webpack.HotModuleReplacementPlugin() // HMR webpack内置插件
],
module: {
rules: [
{ // 打包css
test: /\.css$/, // 对于css 使用loader
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: ['css-loader']
})
},
{ // 转化react
test: /\.(js|jsx)$/,
loader: 'babel-loader',// 使用的loader 配置在.babelrc文件内
exclude: /node_modules/
},
{ // 打包图片
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: 'file-loader', // 使用的loader
options: {
//[name] 代表文件名，[ext] 代表文件扩展名，outputPath 是输出的路径。
name: '[name].[ext]',
outputPath: 'images/'
}
},
{ // 压缩图片
loader: 'image-webpack-loader',
options: {
bypassOnDebug: true
}
}
]
},
{ // src图片资源
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
minimize: true
}
}]
}
]
},
devServer: { // webpack-dev-sever配置
port: 9000,
open: true,
hot:true
},
devtool: 'source-map' // 定位错误位置
};babelrc文件
{
"presets": ["env","react"],
"plugins": [
"transform-runtime",
["transform-object-rest-spread", {"useBuiltIns": true}],// 拓展对象符支持
["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]// antd按需加载
]
}