一、webpack安装
安装webpack首先需要安装Node.js,Node.js自带了软件包管理工具npm
1. 查看自己的node版本
node -v
2.全局安装webpack(这里可以指定版本号3.6.0,因为vue cli2依赖该版本)
npm install webpack@3.6.0 -g
3.局部安装webpack(后续才需要)
–save-dev是开发是依赖,项目打包后不需要继续使用的
npm install webpack@3.6.0 --save-dev
4. 为什么全局安装后,还需要局部安装
在终端直接执行webpack命令,使用的全局安装的webpack
当在package.json中定义了script是,其中包含了webpack命令,那么使用的是局部webpack
const path=require('path')
module.exports={
entry: './src/index.js',
output: {
path: path.resolve(__dirname,'dist'),
filename: "bundle.js",
publicPath: "dist/"
},
5.webpack中使用css配置
index.js中导入依赖 require('./css/normal.css')
npm install css-loader style-loader --save-dev
npm install style-loader css-loader -D
module: {
rules: [
{
//css-loader只负责将css文件进行加载
//style-loader负责将样式添加到DOM中
//使用多个loader时,是从右向左
test:/\.css$/,
use:['style-loader','css-loader']
},
6.webpack中使用less配置
index.js中导入依赖require('./css/special.less')
npm install less-loader -D
npm install less -D
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
},
7. webpack中图片文件的处理
normal.css—— background: url("../img/test.jpg");
npm install --save-dev url-loader
如果图片比limit大的话
npm install file-loader --save-dev
然后在webpack.config.js里面output下加上:
publicPath: "dist/"
注意:--save-dev写前后都没有关系
{
test:/\.(png|jpg|gif|jpeg)$/,
use:[
{
loader:'url-loader',
options: {
//当加载的图片,小于limit时,会将图片编译成base64字符串模式
//当加载的图片,大于limit时,需要使用file-loader模块进行加载
limit:13000
}
}
]
}
8.图片文件处理——修改文件名称
我们可以在options中添加上如下选项
img:文件要打包到的文件夹
name:获取图片原来的名字,放在该位置
hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位
ext(extension):使用图片原来的扩展名
name:'img/[name].[hash:8].[ext]'
但是图片并没有显示出来,这是因为图片使用的路径不正确
(1)默认情况下,webpack会将生成的路径直接返回给使用者
(2)但是,我们整个程序打包在dist文件夹下的,所以这里我们需要在路径下再添加一个dist/
二、webpack-使用Vue的配置过程
1.引入vue.js
如何在webpack环境中集成Vue.js
需要先进行安装对其所有依赖
注:因为后续是在实际项目中也会使用vue的,所以并不是开发时月以来
npm install vue --save
2.使用Vue进行开发
1.runtime-only——代码中,不可以有任何的template
2.runtime-compiler——代码中,可以有template,因为有compiler可以用于编译template
{
test: /\.js$/,
//exclude——排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//preset——配置
presets: ['es2015']
}
}
},
resolve: {
//alias:别名
alias: {
//$——结尾的意思
'vue$':'vue/dist/vue.esm.js'
}
}
之后再 npm install
3…vue文件封装处理
安装vue-loader和vue-template-compiler
(1).npm install vue-loader vue-template-compiler --save-dev
(2). {
test: /\.js$/,
//exclude——排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
//preset——配置
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
}
}
(3).package.json里面—— "vue-loader": "^13.0.0",
npm install 更新一下
组件省略后缀,可以在webpack.config.js里面的resolve下加上
extensions: [’.js’,’.css’,’.vue’],即可