##1.前置条件:已安装webpack
项目中官方的打包与实际不相匹配,所以重新构建了项目
1)npm init 创建package.json 文件。(name 需小写)
2)创建webpackage.config.js
// 由于 webpack 是基于Node进行构建的,所有,webpack的配置文件中,任何合法的Node代码都是支持的
var path = require('path')
var htmlWebpackPlugin = require('html-webpack-plugin')
// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候,工具会发现,我们并没有提供 要打包 的文件的 入口 和 出口文件,此时,他会检查项目根目录中的配置文件,并读取这个文件,就拿到了导出的这个 配置对象,然后根据这个对象,进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'),
filename: 'build.js'
},
plugins: [ // 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html'
})
],
module: {
rules: [
{ test: /\.(js|jsx)$/,exclude:'/node_modules',use: 'babel-loader'},
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' }, // 处理 图片路径的 loader
]
},
mode:"development"
}
3.安装依赖
- npm i --save-dev html-webpack-plugin
- npm i --save-dev html-dev-server
package.json 中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --open --port 3000 --hot"
},
3.npm i --save-dev react react-dom
4.babel 插件
5.babel配置文件