webpack
一、基本概念
webpack:是一个打包模块化javascript的工具,通过loader转换文件,通过plugin注入钩子,最后输出由多个模块组合成的文件,webpack专注构建模块化项目。
(编写代码是开发环境,运行的是打包后的代码)
二、使用步骤
1.下载安装yarn
地址:https://yarn.bootcss.com/docs/install/#windows-stable
2.初始化包环境
yarn init
3.安装依赖包
yarn add webpack webpack-cli -D
4.package.json文件配置
scripts: {
"build": "webpack"
}
5.新建src文件夹
6.运行打包命令
yarn build
(所有要打包的资源都要和入口产生直接/间接的引用关系。执行webpack命令,找到配置文件,入口和依赖关系,打包代码输出到指定位置)
三、配置
1.打包的入口和出口
①入口文件:src-indexjs
②出口文件:dist-main.js
修改打包的入口和出口:在根目录下,新建webpack.config.js文件中新增如下配置信息:
const path = require('path') // 导入 node.js 中专门操作路径的模块
module.exports = {
entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
output: {
path: path.join(__dirname, './dist'), // 输出文件的存放路径
filename: 'bundle.js' // 输出文件的名称
}
}
2.自动打包功能
webpack-dev-server
开发服务器:启动本地服务,实时更改修改的代码,打包变化代码到内存中,然后直接提供端口和网页访问
①运行
yarn add webpack-dev-server -D
②配置命令
scripts: {
"build": "webpack --config webpack.config.js",
"serve": "webpack serve --config webpack.config.js"
}
③webpack.config中添加服务器配置
module.exports = {
// ...其他配置
devServer: {
port