Webpack的安装与loader的配置

最新推荐文章于 2023-03-24 09:38:22 发布

三叉戟上的鲤鱼王

最新推荐文章于 2023-03-24 09:38:22 发布

阅读量254

点赞数 1

分类专栏： Vue.js 文章标签： vue npm vue.js html css

本文链接：https://blog.csdn.net/m0_46725128/article/details/114799319

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Webpack的安装与loader的配置

先在官网安装node.js 和npm
然后在cmd中安装webpack（以3.6.0版本为例）

新建项目，结构如下
在这里插入图片描述

在vscode控制台中输入
在这里插入图片描述
若出现以下报错

输入Set-ExecutionPolicy -Scope CurrentUser

和RemodteSigned
在这里插入图片描述

问题解决（若没有出现则跳过此步骤）
在这里插入图片描述
webpack可以适配各种模块化的规范

在002webpack文件夹下新建webpack.config.js（名字不能是别的）
在这里插入图片描述

在控制台输入npm init
配置后生成package.json文件
然后输入npm install

引入puth路径不能是相对路径，绝对路径复用性不强，故用node动态的获取路径
拼接路径
path:path.resolve(__dirname, ‘dist’ ),
dirname：全局变量，保存着当前文件所在的路径（Node中的）然后再拼接一个dist

之后在控制台输入webpack，打包成功

用 npm run build 指令打包
在package.json文件中的script里加入“build”：“webpack”
当识别到build指令时会自动执行webpack打包，并且优先执行本地的webpack版本
在这里插入图片描述
在webpack官网的loader模块找对应的loader安装来编译运行css,vue等文件
注意版本如果太高或者不一致可能会报错建议降低版本。
安装之后要在webpack.config.js文件中进行配置

在package.json中可以看到安装的loader的版本：

"devDependencies": {
    "css-loader": "^3.6.0",
    "file-loader": "^3.0.1",
    "style-loader": "^2.0.0",
    "url-loader": "^1.1.2",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0"
  },
  "dependencies": {
    "vue": "^2.5.21"
  }