webpack配置进阶
|字数总计:2.4k|阅读时长:10分钟|阅读量:
package.json 中定义启动
有时候，我们需要在本地安装webpack服务，来对应项目开发。但是在终端输入的webpack命令都是全局webpack。这是我们通过脚本进入本地webpack
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
{
"name": "mywebpack",
"version": "3.6.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {},
"description": ""
}
|
终端执行命令：npm run bulid 会自动搜索本地webpack服务，其次全局
本地webpack路径寻找：node_modules/.bin
webpack添加mode
1
2
3
4
5
6
|
module.exports = {
mode: 'development',
entry: './src/index.js',
……………………………………………………………………
|
1
2
3
4
5
6
7
8
9
|
@fontSize:70px;
@fontColor:#000000;
body{
font-size: @fontSize;
color: @fontColor;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
const { add, mul, name, age, obj } = require('./js/main.js')
console.log(name + '的年龄：');
console.log(age);
console.log(obj.name + '的年龄：');
console.log(obj.age);
console.log(name + '和' + obj.name + '的年纪相加等于' + '=' + add(age, obj.age));
console.log(name + '和' + obj.name + '的年纪相乘等于' + '=' + mul(age, obj.age));
require('./css/index.css')
require('./css/index.css')
document.write('hello world!')
|
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'my-first-webpack.bundle.js',
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.less$/,
use: [{ loader: 'style-loader',option:},
{ loader: 'css-loader',option:},
{ loader: 'less-loader',option:}]
}
]
}
};
|
首先，你需要先安装 less 和 less-loader：
1
| $ npm install less less-loader --save-dev
|
配置好文件后，通过命令打包
快速开始
首先，你需要安装url-loader和 file-loader
1
2
3
| npm install url-loader --save-dev
npm install file-loader --save-dev
|
index.js
1
| import img from './image.png';
|
index.css
1
2
3
| body {
background-image: url("../img/tangsan.jpg");
}
|
url-loader 功能类似于 file-loader, 但是在文件大小（单位为字节）低于指定的限制时，可以返回一个 DataURL。
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [{
loader: 'url-loader',
options: {
limit: 25 * 1024,
name: './img/[name].[hash:8].[ext]',
},
}]
},
],
},
};
|
limit
类型: Boolean|Number|String 默认值: true
该值可以通过 loader 的 options 参数来指定，默认为 undefined。
Boolean
开启/关闭将文件转换为 base64。
1
| npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
|
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
|
webpack配置vue
快速开始
1
2
| // 安装vue, 不使用 --save-dev,这表示开发者依赖，但是vue打包后仍然依赖
npm install vue --save
|
用法
index.js
1
2
3
4
5
6
7
8
9
|
import Vue from 'vue'
const app = new Vue({
el: '#app',
data: {
message: 'hello webpack'
}
})
|
index.html
1
2
3
| <div id="app">
{{message}}
</div>
|
Warning：打开控制台检测错误
- runtime-only：代码中，不可以有任何的template，对于vue实例用div绑定id的也是template
- runtime-compiler：与它相反，可以有。因为含有compiler，可以编译template
如何指定 runtime-compiler
1
2
3
4
5
| resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
|
vue中template和el的关系
正常运行之后，我们来考虑另外一个问题：
- 如果我们希望将data中的数据显示在界面中，就必须是修改index.html
- 如果我们后自定义了组件，也必须修改index.html来使用组件
- 但是html模板在之后的开发中，我并不希望手动的来频繁修改，如何做到？
定义template属性：
- 在前面的Vue实例中，我们定义了el属性，用于和index.html中的#app进行绑定，让Vue实例之后可以管理它其中的内容
- 这里，我们可以将div元素中的内容删掉，只保留一个基本的id为div 的元素
- 但是如果我依然希望在其中显示的内容，如何操作呢？
- 我们可以再定义一个template属性，代码如下
1
2
3
4
5
6
7
8
9
10
11
12
|
new Vue({
el: '#app',
template: `<div>
{{message}}-{{test}}
</div>
`,
data: {
message: 'hello webpack',
test: '不更改基本模板'
}
})
|
总结：当template和el同时出现时，template会替换el
将template代码移出vue实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| const App = {
template: `
<div>
{{message}}-{{test}}
</div>
`,
data() {
return {
message: 'hello webpack',
test: '不更改基本模板'
}
}
}
new Vue({
el: '#app',
template: `<App/>`,
data: {
},
components: {
App
}
})
|
(一)使用 js 文件来存放子组件的模板
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
| export default {
template: `
<div>
{{message}}-{{test}}
</div>
`,
data() {
return {
message: 'hello webpack',
test: '不更改基本模板'
}
}
}
|
1
| import App from './vue/app.js'
|
(二)使用 .vue 文件存放子组件的模板
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| // 模板
<template>
<div>
<p class="app"> {{message}}-{{test}} </p>
</div>
</template>
// 写模板data、mothods等
<script>
export default{
name: "App",
data() {
return {
message: 'hello webpack',
test: '不更改基本模板'
}
}
}
</script>
// 写style样式
<style scoped>
.app{
color: red;
}
</style>
|
1
| import App from './vue/App.vue'
|
快速开始
使用vue文件，需要安装新的loader来加载，vue-template-compiler 模板编译
1
| npm install --save-dev vue-loader vue-template-compiler
|
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
|
module.exports = {
module: {
rules: [{
test: /\.vue$/,
use: {
loader: 'vue-loader'
}
}]
}
}
|
运行
Warning
安装的vue-loader有很多版本，但是从14.0版本开始，vue-loader就需要plugin插件，但是我们，没有
package.json
更改版本：”13.0.0”，然后在终端输入 npm install，重新安装一下
根据测验，我们直接改版本数据，是不能安装到13.0.0版本的，返回在npm install 时会损坏vue-loader插件，导致无法识别vue文件
解决方案一
先卸载之前的版本，然后通过添加@+版本号，安装早期版本
1
2
| npm uninstall vue-loader
npm install vue-leader@14.2.2
|
这时我们在进行打包操作，能够正常运行了
解决方案二
直接按照报错要求，添加依赖的plugin插件
1
2
3
4
5
| const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins: [
new VueLoaderPlugin()
],
|
注册子组件
Cpn.vue：这里的命名并不是使用模板的名字，是导入的路径名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <template>
<div>
<div class="">我是子组件</div>
<div class="">我是子组件</div>
</div>
</template>
<script>
export default {
name: 'Cpn',
components: {},
props: {},
data() {
return {
};
},
watch: {},
computed: {},
methods: {},
created() {},
mounted() {}
};
</script>
<style scoped>
</style>
|
App.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <template>
<div>
<p class="app"> {{message}}-{{test}} </p>
<cpn/>
</div>
</template>
<script>
//导入Cpn.vue，命名cpn
import cpn from './Cpn.vue'
export default{
name: "App",
data() {
return {
message: 'hello webpack',
test: '不更改基本模板'
}
},
components:{
cpn:cpn // 同样的名字可以写成如下
//cpn
//模板名 : 导入名import
}
}
</script>
<style scoped>
.app{
color: red;
}
</style>
|
这样就可以利用组件化开发，配合webpack操作
路径文件省略后缀名
webpack.config.js
这样配置webpack，可以省略路径后缀名
微信
支付宝
