webpack的学习
注：在建项目的时候名字不可以出现中文，且尽量不要出现大写
webpack的安装
在终端执行 cnpm i webpack --save-dev命令进行本地的安装（生成webpack.json文件），还有全局安装一个webpack，因为要在终端执行
装包
-----在装包之前要初始化一下,执行这个命令，cnpm init -y
装入jquery
------执行cnpm i jquery -S
安装webpack-dev-server
执行命令cnpm i webpack-dev-server -D进行安装
在webpack.json中配置命令，找到scripts，在之中增加"dev":"webpack-dev-server".如下
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},
webpack-dev-server工具的使用，实现自动编译的功能
需要下载node.js-----环境的需要
需要配置两个文件
在项目根目录下创建webpack.config.js 文件，指定文件的出口和入口，如下：
const path
= require('path')
module
.exports
= {
entry
:path
.join(__dirname
,'./src/main.js'),
output
:{
path
:path
.join(__dirname
,'./dist'),
filename
:'bundle.js'
}
}
在package.js中配置指令找到script增加"dev": "webpack-dev-server"如图
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
}
生产package.json文件
在项目中用 npm init -y 生成package.json 文件
安装webpack
执行这个命令 npm install webpack -D本地安装webpack
安装webpack-dev-server
执行这个命令 npm install webpack-dev-server -save-dev
运行webpack-dev-server工具
在控制台终端输入npm run dev运行工具
需要注意的是
在index.html中引用的bundle.js直接在根目录进行引用 <script src="/bundle.js"></script>
在包出现问题的时候不要直接删除本地的包，选择更新他
更新全局包：
npm update <name> -g
更新生产环境依赖包：
npm update <name> --save
更新开发环境依赖包：
npm update <name> --save-dev
在配置webpack.config.js自动打包的时候,出现Error: Cannot find module '@babel/core’错误。
产生错误原因：
官方默认babel-loader | babel对应的版本需要一致: 即最新babel-loader需要搭配最新版本babel。
解决方式：
回退低版本: npm install -D babel-loader@7 babel-core babel-preset-env
2、均更新到最高版本:npm install -D babel-loader @babel/core @babel/preset-env webpack
注
在处理图片的注意事项
使用url-loader处理，还要下载file-loader才能处理相关的图片， 而且图片的静态文件，默认是直接打包在项目的根目录下多以要处理图片的话要进项路径配置的处理，设置options的配置
{
test: /.(jpg|png|gif|bmp|jpeg|webp)$/,
use: {
loader: 'url-loader?limit=42476&name=[hash:8]-[name].[ext] ',
options: {
publicPath: "images/"
}
}
},
