一、安装
-
npm i webpack -g，全局安装webpack，就可以在全局使用webpack命令。只要安装一次，电脑没啥bug，后面就再也不需要安装了。这里进行了全局安装作为测试。（不推荐全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本，并且在使用不同的 webpack 版本的项目中，可能会导致构建失败。） -
npm i webpack --save-dev，在项目根目录中运行，安装到项目依赖中。对于大多数项目，我们建议本地安装。
注意：webpack 4+版本，还需要安装webpack-cli。npm i webpack-cli -g和npm i webpack-cli --save-dev。
webpack-cli是 webpack 的命令行工具。让我们可以不用写打包脚本，只需配置打包配置文件，然后在命令行输入 webpack --config webpack.config.js 来使用 webpack。
二、使用测试
1、创建工程。通常有目录结构：
- src，源码
- dist，项目发布文件夹，直接把dist给用户（产品级）
- index.html，首页
- main.js，项目的JS入口文件
2、初始化项目
在项目目录（或者vscode终端中），npm init -y，初始化生成一个新的 package.json文件，-y即代表跳过提问阶段默认全部yes（package.json 文件里记录项目的描述信息：项目作者、项目描述、项目依赖哪些包、插件配置信息等）。
3、引入jquery。
- 项目要用npm去安装jquery。
-
npm i jquery -S，npm安装jquery，完成后目录会出现node_modules文件夹，里面有安装下来的jquery。
- 引入jquery.js。注意：不推荐直接在html中引用，会导致二次请求拖慢速度。所有东西都在
main.js中去写，将来页面直接引入main.js。
//导入jquery（ES6）
import $ from 'jquery'
即表示：从node_modules中导入jquery的包，用$变量名接收。（好比Node.js中：const $ = require('jquery')）
4、在main.js中写逻辑。
使列表隔行变色。
//main.js 项目JS的入口文件
//导入jquery
import $ from 'jquery'
$(function(){
console.log('执行开始');
$('li:odd').css('backgroundColor','lightblue'); //奇数行
$('li:even').css('backgroundColor',function(){
return '#'+'D97634';
});
});
5、在index.html中引入main.js。
这时候运行一下，就会发现问题：ES6的import语法，浏览器无法识别解析。
6、使用Webpack进行处理。
如果在项目中直接执行(npx)webpack，则会进行默认打包，将src下的入口文件index.js进行打包生成一个dist目录并存在一个打包好的main.js文件。
但实际开发中，根本不会使用0配置。
- 在项目中创建 webpack 配置文件 webpack.config.js（默认，可修改）。此文件其实就是个JS文件，通过Node中的模块操作，向外暴露了一个配置对象。
正常配置：
module.exports = {
entry: '', // 入口文件配置
output: {}, // 出口文件配置
module: {}, // 处理对应模块，例如解读CSS、图片如何转换压缩
plugins: [], // 对应的插件
devServer: {}, // webpack开发服务器配置
mode: 'development' // 模式配置
}
根据实际项目配置：
const path = require('path'); //webpack基于Node.js，可以直接用，path模块
module.exports = {
entry: path.join(__dirname,'./src/main.js'), // 入口文件，要用webpack打包哪个文件
output: { //输出文件相关的配置
filename: 'bundle.js', // 输出文件的名称
path: path.resolve('dist') // 打包后文件的输出目录，必须是绝对路径
},
mode: 'development'
}
- 使用新的配置文件进行构建
(npx) webpack --config webpack.config.js，此时dist文档下出现一个bundle.js的文件。（如果配置文件名为webpack.config.js可直接执行webpack不需要--config指定配置文件，默认）
注意：执行webpack时可能会出现警告，即未设置mode(模式)。
mode是webpack中独有的，有两种打包环境：开发环境development和生产环境production。
webpack.config.js需要指定模式mode: 'development/production'；或者执行webpack打包命令时指定模式webapck --mode=production/production。
- index.html导入此新构建好的js文件，运行成功。
<script src="../dist/bundle.js"></script>
三、npm脚本运行
每次执行 webpack-cli 不方便，我们可以把它添加进npm脚本。
在 package.json的scripts中，可以配置一些我们要运行的命令，添加：
"scripts": {
"build" : "webpack --config=webpack.config.js"
}
这个时候我们在终端执行输入命令npm run build则代表会执行后面的命令。
网友评论