Vue Webpack介绍及安装
原创
@TOC
1 Webpack介绍及安装
https://webpack.js.org/concepts/
- 本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具
安装：
- 首先要安装
Node.js、版本大于8.9 - 查看node版本
node -v- 全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g- 局部安装
cd 对应目录
npm install webpack@3.6.0 --save-dev- 为什么全局安装后，还需要局部安装呢？
- 在终端直接执行webpack命令，使用全局安装的webpack
- 当package.json中定义了scripts时时，其中包含了webpack命令，那么使用的是局部webpack
2 webpack起步
打包
webpack ./src/main.js ./dist/bundle.js3 webpack配置
webpack.config.js
// 使用node的包path
// 初始化: npm init
const path = require('path')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),// 当前文件绝对路径
filename: 'bundle.js'
}
}打包
webpack使用脚本
# 初始化
npm init
# 安装package-lock.json中的依赖
npm installpackage.json文件中scripts存放脚本，可以自定义
{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
}
}# 测试脚本
npm run test
# 打包
npm run build4 loader
4.1 css-loader、style-loader
- 通过npm安装需要使用的loader
https://www.webpackjs.com/loaders/css-loader/
安装cssl和style的loader
npm install --save-dev css-loader
npm install style-loader@2.0.0 --save-devfile.js
import css from 'file.css';webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
}
}- 在webpack.config.js中module关键字下进行配置
4.2 less-loader
npm install --save-dev less-loader less5 webpack图片文件处理
url-loader
npm install --save-dev url-loader
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}css
body {
/*background-color: pink;*/
background: url("../img/1.jpg");
}6 webpack使用vue的配置
npm install vue --savewebpack.config.js
// 指定查找vue的路径
resolve:{
// alias: 别名
alias:{
'vue$':'vue/dist/vue.esm.js'
}
}main.js
// 5.使用vue进行开发
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: '你好'
}
})npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
