webpack.md笔记
# webpack
### 安装webpack
`npm init -y`
`npm i webpack@3.6.0 -s -d `
### 配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
### 运行
`npm run build`
### 其他文件配置
访问https://www.webpackjs.com/loaders
##### **css**
- style-loader
- ```javascript
npm install style-loader --save-dev
```
##### **png**
-url-loader
```javascript
npm install --save-dev url-loader
```
webpack.config.js
```
output: {
path: path.resolve(__dirname,'dist'),
filename: 'a.bundle.js',
// piblicPath:'../dist/' // url('./')?
},
```
~~~javascript
- 文件名问题
- ```javascript
```
- test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name:'img/[name].[hash:8].[ext]'
}
}
]
```
##### ** ES6语法**
~~~
- label
-
```javascript
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack
```
- webpack.config.js
```javascript
output: {
path: path.resolve(__dirname,'dist'),
filename: 'a.bundle.js',
// piblicPath:'../dist/' // url('./')?
},
```
```
```
```
- 文件名问题
- ```javascript
```
```
- test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
```
### vue()配置
#### **安装Vue**
`npm i vue -s`
#### 创建实例
```javascript
import App from './vue/App.vue'
const app = Vue({
el: '#app',
template: '<App/>',
components: {
App
}
})
```
#### 改配置
```javascript
webpack.config.js
resolve: {
// 别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
```
~~~javascript
App.vue
<template>
<div class="com">
<h2>{msg}</h2>
</div>
</template>
<script>
data () {
msg: 'hello'
},
methods: {
btn (){
}
}
</script>
<style>
.com{
color: red;
}
</style>
~~~
#### 安装vue-loader
`npm i vue-loader vue-template-compiler -s -d`
#### 配置
https://vue-loader.vuejs.org/zh/guide/#手动设置
```javascript
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
extensions: ['.js','.css','.vue'],// 省略后缀名
resolve: {
// 别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
```
#### 多文件
App.vue
```javascript
import Cpn from './Cpn.vue'
export default {
name: 'App',
components:{
Cpn
}
data () {
msg: 'hello'
},
methods: {
btn (){
}
}
}
```
Cpp.vue
```javascript
export default {
name: 'Cpn',
data () {
name: 'hello'
},
methods: {
btn (){
}
}
}
```
#### plugin插件
1. 添加版权插件
webpack.config.js
```javascript
const webpack = require('webpack')
module.exports = {
.....
plugins: [
new htmlWebpackPlugin
]
}
```
2. 打包html
1. 安装插件
`npm i html-webpack-plugin -s -d`
2. webpack.config.js
```javascript
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
.....
plugins: [
new wewbpack.BannerPlugin('最终版权归 dami左右 '),
new htmlWebpackPlugin({
templates: 'index.html'
})
]
}
```
3. 注释// piblicPath:'../dist/'
4. 删除引入js
3. 压缩js uglifyjs-webpack-plugin ( webpack4自动压缩)
`npm i uglifyjs-webpack-plugin -s -d`
webpack.config.js
```javascript
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
.....
plugins: [
new wewbpack.BannerPlugin('最终版权归 dami左右 '),
new htmlWebpackPlugin({
templates: 'index.html'
}),
new uglifyjsWebpackPlugin()
]
}
```
4. 搭建本地服务器
1. 安装
`npm i webpack-dev-server -s -d`
2. 配置
```javascript
devServer: {
contentBase: './dist',
inline: true
}
```
3. 脚本
```javascript
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"// -open自动打开
},
```
4运行
`npm run dev`
4. webpack配置文件分离
1. base.config.js 公共
2. dev.config.js 开发
3. prod.config.js 生产
4. 安装组合
`npm i webpack-merge -s -d`
5. 导入
prod.config.js
```javascript
const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge({
plugins: [
new uglifyjsWebpackPlugin()
]
})
```
dev.config.js
```javascript
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge({
entry: {app: './dist/bundle.js'},
devServer: {
contentBase: './dist',
inline: true
}
})
```
base.config.js
```javas
path: path.resolve(__dirname,'../dist'),
```
pack.json
```javascript
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
},
```
