qq_42767647的博客

步骤： 1.安装插件 2.import并挂载，注意大小写 3.运行

1.在js文件中import vue文件的组件，如： 2.安装插件 npm i vue-loader vue-template-compiler -D 3.修改webpack.config.js文件 4.运行成功

例如，一个js文件里有以下语法，直接运行会报错的，需要安装插件。 1.安装插件： npm install babel-loader @babel/core @babel/runtime -D npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D 2.修改webpack.config.js，添加画圈的语句 3.新建babel.config.js文件，添加语句：

loader调用过程： CSS文件： 未添加loader之前，若有css文件，运行会报以下错： 解决：添加相应的loader： 1.安装插件 npm install --save-dev style-loader css-loader 2.在webpack.config.js加入module那块 3.运行，不会报错了。 图片文件： 未添加图片相关的loader前，会报以下错： 解决：添加loader： 1.安装插件 npm install --save-dev file-loader npm i

未配置该插件之前，一开始打开的是如下页面： 该插件的作用就是，一打开就是HTML页面，安装插件的方法： 1.安装插件 npm install html-webpack-plugin -D 2.修改webpack.config.js文件的头部区域，添加以下信息： 3.修改webpack.config.js文件中向外导出配置对象，如下： 4.运行 打开页面后，就是刚刚设的那个页面，如我设的是index.html页面，打开就是我所设的index.html页面，而不是有文件夹那个页面： ...

1.安装 npm install webpack-dev-server -D 2.修改package.json->scripts中的命令： 3.修改index.html中，修改引用script的路径： 4.运行 npm run dev 运行成功： 按住Ctrl点击该地址 会打开以下界面： 点击页面存放的文件夹src，就会看到所编写的页面，如我写的： 5.测试下是否配置自动打包成功： 如： （1）修改js 修改下颜色： （2）直接查看页面，即可发现，颜色已改变： 说明自动打包已成

1.首先建一个目录 2.进入到该目录 3.初始化 npm init -y 4.安装 webpack-cli npm install webpack webpack-cli --save-dev 5.安装jquery npm install jquery -S 6.写一个初始的HTML页面与js 7.添加webpack.config.js文件 const path = require('path') module.exports = { mode: 'development',