操作步骤
1、 npm i webpack -g （global全局）
npm i webpack-cli -g
2、 npm init
产生package.json
3、npm install webpack -S
npm install webpack -D
4、dependencies依赖项 存储的是-S
devdependencies开发者依赖性 存储的是-D
6、dist文件夹=》存储webpack打包之后的文件
html文件夹放html
新建一个main.js作为主文件
7、初级打包 webpack main.js --output dist/bundle.js
8、配置webpack之后，写入entry和output
9、通过webpack进行打包
10、通过webpack-dev-server热更新，实时完成打包，将js打包虚拟内存里面
11、 "scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev":"webpack-dev-server"
},
webpack.config.js配置
const path = require("path"); //加载path包
//node内容
module.exports = {
// entry:入口文件，我们要打包成什么文件
// output：输出，我们要输出的内容
// plugins：插件，因为webpack默认只能打包js，如果要打包html，vue，就需要插件
// resolve：文件别名的配置 js/out/a/b/c.js =》c.js
// moudule:配置规则，webpack打包 打包配置
entry: path.join(__dirname, "./main.js"), //dirname文件运行路径
//html前台,同级目录直接访问,但是后台 同级文件用./
output: {
path: path.join(__dirname, "./dist"),
filename: "boundle.js",
},
};
const path = require("path");
module.exports = {
entry: "./main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "boundle.js",
publicPath: "dist/", //所有url前都会加上dist/
},
module: {
rules: [{
test: /\.(less|css)$/,
/[图片上传失败...(image-c04094-1597320942781)]
s-loader只负责将css文件进行加载，不进行解析所以单独安装不会生效
//style负责将样式添加到DOM中
use: [{
loader: "style-loader", // creates style nodes from JS strings
},
{
loader: "css-loader", // translates CSS into CommonJS
},
{
loader: "less-loader", // compiles Less to CSS
},
], //打包时会从右向左进行编译，若载入顺序错误则会报错 (1:1) Unknown word
},
// url-loader 配置
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: "url-loader",
options: {
//小于limit时会以base64格式（将图片转换成字符串的格式）渲染到页面中，
// 大于limit的图片需要下载file-loader 否则会报错
limit: 13000,
name: "img/[name].[hash:8].[ext]", //由于打包时webpack为了区别每一张图片会给每张图片不同的32位的hash值，在真实开发中我们可能需要知道图片
// 的名字所以所以需要配置 img:要打包到的图片路径，name:获取图片名字，hash:8 依然使用hash值，但只保留8位，ext:文件扩展名
},
}, ],
},
//babel-roader 配置
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/, //在对es6进行转化时exclude内的文件不会被转换
use: {
loader: "babel-loader",
options: {
presets: ["es2015"], //webpack在运行时会去找相关配置文件
},
},
},
],
},
};
