因为webpack加载器默认只打包.js文件，可我们需要打包别的文件怎么办？结合上一篇文章，今天来写一下加载器loader。
**
以下内容就是有关内容
**
less-load 可以打包 .less文件
sass-load 可以打包 .scss文件
url-loader 可以打包 css 中与url路径相关的文件
1.npm i style-loader css-loader -D （处理 css 文件）
2. npm i less-loader less -D （处理less 文件）
3. npm i sass-loader node-sass -D （处理scss 文件）
下载完之后 需要在 webpack.config.js文件配置，如下所示：
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }，
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
- npm i postcss-loader autoprefixer -D (配置后，可以根据不同浏览器自动生成兼容性代码)
- 在项目根目录中创建 postcss 的配置文件 postcss.config.js，并初始化如下配置：
const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件
module.exports = {
plugins: [ autoprefixer ] // 挂载插件
}
6.在webpack.config.js 文件添加postcss 的规则
module: {
rules: [//主要是添加了 postcss-loader
{ test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }
]
}
- npm i url-loader file-loader -D 命令（打包样式表中的图片和字体文件）
- 在webpack.config.js 文件添加规则
module: {
rules: [
{
test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
use: 'url-loader?limit=16940'//限制图片大小，小于这个值时会转为base64加载效率更高
}
]
}
- babel 转换器 就是将js文件中的高级语法转化为低级语法
- npm i babel-loader @babel/core @babel/runtime -D
- 安装babel语法插件相关的包：npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
- 在项目根目录中，创建 babel 配置文件 babel.config.js 并初始化基本配置如下：
module.exports = {
presets: [ '@babel/preset-env' ],
plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties’ ]
}
13在webpack.config.js 文件添加规则
module: {
rules: [
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
// exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件
]
}
- 单文件组件 ，因为项目变大时，js逻辑越来越复杂，模板也要用 / 来拼接等
- 新建src–components文件下建 Apple.vue，内容如下：
<!-- 模板内容 -->
<template>
<div>
<h1>这是 Apple根组件</h1>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {}，
created () {}
};
</script>
<!-- 样式 部分-->
<style lang="stylus" scoped >
<!-- scoped 局部作用域 防止冲突 -->
h1 {
border: 1px solid skyblue
}
</style>
- npm i vue-loader vue-template-compiler -D 命令
- 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
plugins: [
// ... 其它插件
htmlPlugin,
new VueLoaderPlugin()],
]
}
18.运行 npm i vue -S 安装 vue
在index.js引入 import App from “./components/Apple.vue” 以及 import Vue from ‘vue’ 来导入 vue 构造函数 创建 vue 的实例对象，并指定要控制的 el 区域 通过 render 函数渲染 App 根组件
19.在package.json文件中配置 webpack 打包命令，该命令默认加载项目根目录中的 webpack.config.js 配置文件
"scripts": {
// 用于打包的命令
"build": "webpack -p",
// 用于开发调试的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8000",
},
手动搭建脚手架到这里就简单配置完了，目的就是让我们了解，vue项目运行的机制是怎样的
但是我们有更简单的方法 搭建脚手架，那就是
3.x 版本的 Vue 脚手架 npm install -g @vue/cli
全局下载一次就行 然后再进行下面的操作
1.vue create my-project （基于 交互式命令行 的方式，创建 新版 vue 项目） 和 vue ui （图形化界面 的方式，创建 新版 vue 项目）
2 2.x 的旧模板，创建 旧版 vue 项目
npm install -g @vue/cli-init
vue init webpack my-project
本人推荐用 vue ui 图形化界面 简单 在面板里有依赖，插件 可供下载
