本文详细介绍Webpack配置流程，包括安装、配置、使用各种Loader处理不同类型的前端资源，如CSS、LESS、SASS及Vue文件。同时介绍了如何配置插件、解决常见问题，以及ES6语法转换。
文章目录
先配置webpack文件
webpack文档：https://www.webpackjs.com/concepts/
- 先建立webpack文件，再使用npm init -y 新建包管理文件
- 安装webpack 命令：
// 全局安装 （使用webpack需要全局安装）
npm install -g webpack
// 安装到你的项目目录 （有的时候需要对于一个项目安装webpack）
npm install --save-dev webpack
// 清空命令
cls
// 上一级的上一级文件命令
..\
- 建立src文件，存放源代码
- 建立index.html 项目的入口文件
- 建立main.js 项目的js文件入口 —— 所有的引入文件写在这里
- 建立dist文件夹
- 使用webpack .\src\main.js .\dist\bundle.js 出现报错，
参考链接：https://www.jianshu.com/p/a55fb5bf75e1
是因为使用的webpack版本过高，需要更改命令
webpack .\src\main.js -o .\dist\bundle.js
- 为了自动打包，安装新的工具，使用新的命令
npm install webpack-dev-server
这个工具需要再项目内安装webpack，
npm install webpack - 同时填写配置文件，需要在根目录建立webpack.config.js
按照webpack官方文档填写配置
// 写配置文件 使用的是node语法
var path = require('path')
// 暴露对象 webpack配置文件的内容，参考官方文档
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 制定输出文件的名称
}
}
- 在package.json里面去配置新的命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
// 新增的工具， --open自动打开浏览器， --port 3000打开端口号 --hot可以热更新（每次保存自动更新）
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
- 但是由于文件托管在根目录下，就造成读取不到文件，要不然手动src到根目录，或者使用插件plugin ，需要安装这个工具
npm install html-webpack-plugin -d
同时，需要在配置文件中更新配置内容
// 写配置文件 使用的是node语法
var path = require('path')
// 导入webpack的插件工具，在内存中自动生成一个首页，并且把打包好的bundle.js注入页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个plugins节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 暴露对象 webpack配置文件的内容，参考官方文档
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: {
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 制定输出文件的名称
},
plugins: [ // 所以webpack配置插件的节点，所以需要使用数组形式
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定的模板文件路径
filename: 'index.html' // 设置内存页面的名称
})
]
}
这样每次输入命令npm run dev就可以自动打开浏览器，显示文件内容
8. 建立lib文件夹，是手动拷备过来的第三方文件包 —— 在项目中老师使用的是MUI（需要在官网上下载以后拷贝）
比如：使用MUI的时候，由于是代码片段，所以需要使用手动下载第三方的包，然后再拷贝到lib文件夹中，再在mian.js中去导入
// 导入MUI的样式表
import './lib/mui/css/mui.min.css'
（和使用bootstrap一样，要先把第三方的样式引入，才能使用代码片段）
loader配置
loader文档：https://www.webpackjs.com/api/loaders/
webpack只能处理js的文件，如果需要处理css等其他的文件就需要loader这样的另一个工具
npm i style-loader css-loader -d
同时在配置文件中需要做如下的修改
plugins: [ // 所以webpack配置插件的节点，所以需要使用数组形式
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定的模板文件路径
filename: 'index.html' // 设置内存页面的名称
})
],
module: { // 用来配置第三方loader模块的
rules: [ // 第三方模块的匹配规则，类似于正则表达式
// // ——> /\.css/(添加需要处理的文件类型) ——> /\.css$/ 在以$结尾,
// 这种文件用谁来处理呢？ 使用use ，使用的是数组
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 需要处理的第三方文件的loader
]
}
保存以后，npm run dev运行
less sass 配置
less参考链接：https://www.w3cschool.cn/less/
- 配置less 命令：
npm i less-loader less -d
需要配置的文件内容：
module: { // 用来配置第三方loader模块的
rules: [ // 第三方模块的匹配规则，类似于正则表达式
// // ——> /\.css/(添加需要处理的文件类型) ——> /\.css$/ 在以$结尾,
// 这种文件用谁来处理呢？ 使用use ，使用的是数组
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 需要处理的第三方文件的loader
// 处理less文件的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
]
}
main.js中，还需要引入样式
// 拿到的css文件需要引入
import './css/index.css'
- 配置sass方法
sass参考链接：http://sass.bootcss.com/docs/scss-for-sass-users/
命令： npm install sass-loader node-sass -d
配置文件的内容：
module: { // 用来配置第三方loader模块的
rules: [ // 第三方模块的匹配规则，类似于正则表达式
// // ——> /\.css/(添加需要处理的文件类型) ——> /\.css$/ 在以$结尾,
// 这种文件用谁来处理呢？ 使用use ，使用的是数组
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 需要处理的第三方文件的loader
// 处理less文件的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
// 处理sass文件的loader【注意，在配置内容里面写的是scss，但是use后边写的是sass】
// sass与scss的区别：scss继承自sass，并且兼容CSS3
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
]
}
在main.js里面还需要引入
// 引入sass文件，可以同时引入sass文件
import './css/index.sass'
Mint UI
是一个组件库，可以使用npm安装
MUI
是代码的片段，所以每次使用的时候需要在官网上面去拷备对应的代码段
使用bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT
参考链接：https://www.runoob.com/bootstrap/bootstrap-tutorial.html
webpack中使用.vue
1.安装vue的包：
npm i vue -s
2.如果需要使用webpack打包vue文件
需要安装相关的loader
命令：npm install vue-loader vue-template-compiler -d
新增配置文件
{ test:/\.vue$/, use: 'vue-loader'}
【如果想要使用webpack打包，使用vm实例来渲染一个指定的组件，只能使用render函数的方法】
3. 还是不能渲染，是因为在main.js中的vue与原生的vue不一样，所以需要更改引入vue的包的内容，
- 回顾包的查找原则
- 1）找到根目录的node_modules 文件夹
- 2）在node_modules 中根据包名找到vue文件夹
- 3）在vue文件夹中，找一个叫package.json的包配置文件
- 4）在package.json文件中，查找一个main属性【import Vue from ‘vue’】就是从这里面拿到的
4.还需要在webpack.config.js中添加resolve属性
使用render函数渲染组件
<div id="app">
<p>2222</p>
</div>
<script>
var login = {
template: '<h1> 登陆</h1>'
}
var vm = new Vue ({
el: '#app',
data: {},
methods: {},
render: function(createElement){ //默认有一个形参createElement，createElement是一个方法，调用这个方法的时候可以把指定的组件模板渲染为html格式
// 由于直接调用方法然后返回，所以可以直接reture
// var html = createElement(login)
return createElement(login)
// 这里return的结果会替换el指定的组件内容
}
})
</script>
简写：
// render: function(createElements) {
// return createElements(login)
// }
/*
1.使用箭头函数
render: (createElements) => {
return createElements(login)
}
2.箭头函数可以省略参数的小括号
render: createElements => {
return createElements(login)
}
3.简写形参
render: c => {
return c(login)
}
4.箭头函数的体如果只有一行代码，可以省略大括号
render: c => return c(login)
5.箭头函数中，如果没有大括号，默认会自动return
render: c => c(login)
*/
JSON文件不能有注释
npm install中途打断了的话，再重新安装前，需要把node_modules删除重新安装，因为打断会让有的包被破坏，即使运行，也会出现XXX包找不到的问题
ES6中有类的语法，class关键字，有静态属性，对应的有实例属性
Babel
webpack不能处理ES6等更高级的语法，需要安装第三方的loader，通过Babel可以转换ES6语法为webpack能处理的语法
- 命令：
第一个包：
npm i babel-core babel-loader babel-plugin-transform-runtime -d
第二个包：
npm install babel-preset-env babel-preset-stage-0 -d - 配置文件写节点
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
- 还需要在项目的根目录建立 .babel 文件，这个文件需要使用JSON的语法规则（不能使用注释，字符串需要使用双引号）并且备注如下：
{
"presets": [],
"plugins": []
}
扫一扫
1505
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
