基本安装教程
1. 首先你要先有node环境，如何让下载安装这里不再详细解释，大家可以官网自行安装再回来，
2. 创一个文件夹，在下面打开终端
3. 初始化
在终端中运行npm init -y
3. 下载webpack
在终端中运行npm install webpack webpack-cli --save-dev
4.在文件夹下创建以下目录结构、文件和内容
webpack-demo
|- package.json
+ |- /dist
+ |-index.html
+ |- /src
+ |- index.js
做一些初始操作
html文件中生成基本的结构，引入我们的js文件
js文件中写入明显的一个语句，我写的这个
document.body.style.backgroundColor = "skyblue";
给背景加颜色
默默等待webpack安装好
5.使用配置文件webpack.config.js,和src以及dist同等级
+ |- webpack.config.js
6. 执行 npx webpack
这一步会将我们的脚本作为入口起点，然后 输出 为 main.js，这时dist下面会生成一个名为main.js的文件，在html切换中引入
此时页面的结构如下
7. 在webpack.config.js中配置路径
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
暴露路径,filename写js文件的名字，path里面dist里面写文件夹的名字,如果有调整要记得更改
8. 手动打包
npx webpack --config webpack.config.js
这一步如果没有执行第六步，也可以生成一个main.js,你可以手动删除试试效果
这一步会稍微有点长，下面介绍简便方法
在package.josn中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "build": "npx webpack --config webpack.config.js"
},
下面运行npm run build即可达到同样的效果
配置了记得跑一下，看一下是否成功，没有成功记得检查
到这里基本的安装教程就有了，下面介绍一下如何通过 webpack 来管理常用资源以及如何导入第三方库，以及在开发服务器的使用，为了方便，先介绍在开发服务器的使用
在开发服务器的使用（实时重新加载(live reloading)）
1.下载
npm install --save-dev webpack-dev-server
2. 修改配置文件webpack.config.js
告诉开发服务器(dev server)，在哪里查找文件：
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: './dist'
},
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
3.添加一个 script 脚本，可以直接运行开发服务器(dev server),简便操作
package.json文件中写了build的地方
"start": "webpack-dev-server --open",
4.运行
此时你可能会看到这个报错
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
不要慌，只是版本不兼容，可以这样处理
首先卸载webpack-cli,在安装低版本的webpack-cli
npm uninstall webpack-cli@4.3.0 (卸载)
npm i webpack-cli@3.3.12(安装)
如果这个时候安装失败，可以手动删除node_modules里面的webpack-cli包，重新装
手动打包运行
npm run build
npm run start
如果这个时候没有效果,首先检查index.html中引用是否正确，其次，检查package.json中的版本是否正确，下面放出我运行的刚好的版本配置完整版本
{
"name": "wbpcdjbk",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "npx webpack --config webpack.config.js",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.11.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"webpack-cli": "^3.3.12"
}
}
这一部分到这里基本就结束拉
通过 webpack 来管理常用资源
由于这里都差不多，以管理less为例
下载
授人以鱼不如授人以渔，首先看到这个网址（https://www.webpackjs.com/guides/development/）的这个地方
点击收索less,出现这个点击
会提示下载
npm install --save-dev less-loader less
但是这里注意要记得下载css和style,上面一样的步骤一样搜索相应地方即可，这里直接把代码放在下面，为了方便可以直接拿取
npm install --save-dev style-loader //style
npm install --save-dev css-loader //css
在 webpack.config.js中配置规则
module.exports = {
...
module: {
rules: [{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}]
}
};
将 css-loader、style-loader 和 less-loader 链式调用，这样可以把所有样式立即应用于 DOM。
做完这一步我们可以试验一下
注意自己引入的文件全部都要放在src文件夹中不要改变结构
我这里安装了插件所以自动生成了css文件
下面看结果
@maincolor:red;
h1{
color: @maincolor;
}
在index.js中引入
//写法一
import "./less/index.less";
//写法二
const indexLess = require("./less/index.less")
//写法三
import indexLess from "./less/index.less";
颜色有点丑陋
导入第三方库
以jquery为例
1.下载
在终端输入npm i jquery
2.在index.js中引用
import $ from "jquery";
3.在index.js中使用
$("body").append("使用第三方库")
4.手动打包
这个时候由于导入了新的包，所以需要手动打包
npm run build
5.开启服务
npm run start
好了见证奇迹的时候到啦
amazing
恭喜你成功拉