1.创建文件夹
mkdir myapp
2.进入文件夹
cd myapp
3.初始化package.js
npm init -y //直接生成
4.安装 webpack webpack-cli
npm install webapck webpack-cli -D //一起安装，开发环境
5.创建入口文件及其它开发和生产环境文件
webpack.config.js
dist //生产环境文件(发布后的)
src //开发环境文件
main.js //这是项目的Js的入口文件
6.运行npm install webapck-dev-server -D 把这个工具安装到项目的本地开发依赖
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
// 2. 安装完毕后，这个 工具的用法， 和 webpack 命令的用法，完全一样
// 3. 由于，我们是在项目中，本地安装的 webpack-dev-server ， 所以，无法把它当作 脚本命令，在powershell 终端中直接运行；（只有那些 安装到 全局 -g 的工具，才能在 终端中正常执行）
// 4. 注意： webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装 webpack
// 5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;
// 6. 我们可以认为，webpack-dev-server 把打包好的 文件，以一种虚拟的形式，托管到了 咱们项目的根目录中，虽然我们看不到它，但是，可以认为，和 dist src node_modules 平级，有一个看不见的文件，叫做 bundle.js
webpack.config.js文件设置
//引入路径模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const PATH = {
//入口，表示要使用webpack打包哪个文件
app: path.join(__dirname, './src/main'),
//出口，表示打包好的文件，输出到哪 个目录中去
build:path.join(__dirname,'./dist')
}
//webpack配置项，就是一个js文件,通过Node中的模块操作，向外暴露了一个配置对象
module.exports = {
//用来定义开发环境还是生成环境，如果不写会出现警告提示信息
mode:"development",
//手动设置入口文件和出口文件
//入口文件的配置
entry: {
//app是自定义的 这里决定了output输出的名称
app:PATH.app
},
//出口文件的配置
output: {
filename: '[name].js', //指写输出文件的名称
path:PATH.build
},
//模块打包的配置
module: {
rules: [
{
test: /\.(css|scss)&/,
//loader执行的顺序，从右到左，从下到上
use: ["style-loader","css-loader","sass-loader"]
},
{
test: /\.(js|jsx)$/,
use: {
//编译JS
loader: "babel-loader",
//做转换，将ES6转换ES5
options: {
//把jsx语法做个转换
presets:["@babel/env","@babel/react"]
}
}
},
{
test: /\.(jpg|git|png)$/,
use: {
//当出现上三种格式图片时候，用url-loader去解析，如果大于limit:2M,就不会再用url-loader,会自动转换成file-loader去解析 ，会转换base64格式
loader: "url-loader",
options: {
name: "[name][hash].[ext]", //写上hash，上传同一张图片时不会被覆盖，ext是文件的后缀名
limit: 2048,
outputPath:"./img" //打包完成后，输出的目录，会自动在dist目录下创建
}
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: {
loader: "file-loader",
options: {
name: "[name][path].[ext]",
outputPath: "./iconfont"
}
}
}
]
},
//插件
plugins: [
//自动生成index.html
new HtmlWebpackPlugin({
filename: "index.html",
template: "index.html",
title:"webpack-nzsto"
})
],
//配置别名
resolve: {
alias: {
"@":path.join(__dirname,"src")
}
},
//配置代理api，生成一个服务
// devServer: {
// 当前服务基于那个目录下
// contentBase:"./src"，
// prot:"端口号"，
// host:"当前访问路径,默认localhost",
// 做跨域
// proxy: {
// "/api": {
// target: "http://www.badiu.com",
// changeOrigin:true
// }
// }
// }
}
//需要安装相应loader
//当我们在控制台，直接输入webapck命令执行的时候，webpack做了以下几步：
// 1、首先，webpack发现，我们并没有通过命令的形式，给它指写入口和出口
// 2、webpack就会去项目的根目录中，查找一个叫做webpack.config.js的配置文件
// 3、当找互配置文件后，webpack会去解析执行这个配置文件，当解析执行配置文件后，就得到了配置文件中的，导出配置对象
// 4、当webpack拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建
main.js文件设置
//表示导入一个模块
//import xxx from 'xxxx' 这是ES6中导入模块的方法
import React from 'react'
网友评论