webpack相关配置

1.关联

续上之前的《vue-loader+webpack项目配置》：https://blog.youkuaiyun.com/m0_37840862/article/details/119153932?spm=1001.2014.3001.5501

2.版本

• vue：2.6.12
• webpack：4.44.2
• node.js：12.18.3
• npm：6.14.6

3.代码

3.1加载图片跟css

在src下面创建一个assets/images文件夹，里面放上要用的图片
再assets下面创建styles文件夹，用来放css

然后在main.js中引用这个css和图片，因为这个图片小于之前设置的的3M，所以，打包后会看到图片之间变成base64了

3.2使用styl来写css

我本地webpack版本不支持stylus-loader

1.需要配置webpack.config.js

2.写一个styl结尾的css文件

3.在main.js中引用

4.安装依赖

运行的时候，如果没有依赖，就根据提示安装依赖，这个项目中，我的webpack版本不支持stylus-loader，所以就不演示了

3.3 webpack-dev-server相关配置

1.安装依赖

# 使用这个，就不要区分不同系统写不同脚本了，windows和Mac写法可能不一样
npm i cross-env

2.更改脚本

在package.json中修改启动和打包脚本，去掉了dev里面的 --port 3000

3.判断环境

在webpak.config.js中判断

4.可以选择性的加一个plugin，方便在其他地方调用isDev

在webpak.config.js中加入

5.访问

启动项目，npm run dev，访问localhost:3000

6.修改页面不刷新

有时候页面有表单，刷新页面的话，数据就没了，得重新填
webpack.config.js:

7.报错提示在页面上

webpack.config.js:

8.浏览器调试

webpack.config.js:

3.4配置vue的jsx写法以及postcss

postcss：主要用来优化css代码
babel：使vue支持jsx代码

1.安装依赖

npm i postcss-loader autoprefixer babel-loader babel-core

2.创建文件，加入代码

在src下面创建.babelrc和postcss.config.js文件

postcss.config.js代码：

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [
        autoprefixer() //主要给css加一些浏览器的前缀，比如-webkit等等，自动处理
    ]
}

.babelrc代码：

{
  "presets":[
    "@babel/preset-env" // 开始使用的env，会报错
  ],
  "plugins": [
    "trans-vue-jsx"     //转化vue里面的jsx代码
  ]
}

上面代码里面还需要安装两个依赖，如果提示还需要安装依赖，直接根据提示安装就行

npm i babel-preset-env babel-plugin-transform-vue-js

3.添加配置

在webpack.config.js里面添加处理jsx的配置

添加处理styl的配置