webpack

发表于 | 分类于
字数统计: 2.1k字 | 阅读时长 ≈ 9分钟

前端11_2笔记——webpack

安装webpack配置

首先在新建的项目中npm init新建一个npm项目，然后安装webpack相关的组件

1
npm i webpack vue vue-loader

同时还需要安装：

1
npm i css-loader vue-template-compiler

新建一个app.vue并写入一些组件，新建一个webpack.config.js进行一些设置。

新建一个index.js进行入口文件的设置

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './app.vue'

import './styles/test.css'
import './styles/test-stylus.styl'

const root = document.createElement('div');
document.body.appendChild(root);
new Vue({
    render:(h) => h(App)
}).$mount(root)

webpack只支持js文件并且只支持ES5的语法，所以需要进行一些处理：

1
2
3
4
5
6
7
8
module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    },

并且vue-loader在15.*之后的版本都是 vue-loader的使用都是需要伴生 VueLoaderPlugin的，具体内容可详见https://vue-loader.vuejs.org/guide/#vue-cli

所以进行以以下处理：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}

之后运行npm run dev就能够看见新建了一个dist的文件，并且底下有一个bundle.js文件，webpack所作的工作就是把不同的的静态资源文件打包成一个.js文件，然后在html中去引入这个文件实现。因为在http中将零散的文件打包成一个减少http请求的次数。

1.处理.vue文件

在webpack.config.js文件中，利用module来设置rules：

1
2
3
4
{
     test:/\.vue$/,
     loader:'vue-loader'
}

2.处理CSS文件

利用css-loader来处理CSS文件，但是在实际运用的过程当中会有不同的处理方式，所以这时候需要换一种写法：

1
2


最终，CSS代码会写入到js文件中去，并且最终会引入到html当中去。

3.图片的处理方式

这里loader使用一个对象去写，因为实际上一个对象是可以进行配置的，利用options可以对其进行配置：

这里，url-loader可以将图片转换为Base-64代码直接插入到js中去，不用生成新的图片，这对于我们几KB的文件是很有用的，就不用生成http请求。url-loader实际上封装了file-loader，其就是将图片进行读取并进行一些简单的操作之后重新存储。limit设置了转换图片的大小。

1
2
3
4
5
loader:'url-loader',
options:{
    limit:1024,
    name:'[name]-aaa.[ext]'
}

配置之后需要安装相应的模块：

1
npm i style-loader url-loader file-loader

4.CSS

CSS预处理器就是用模块化的思想去写CSS代码。比如利用.styl

1
2
3
4
5
6
7
8
{
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
}

并安装stylus和stylus-loader

配置webpack-dev-server

首先安装这个包

1
npm i webpack-dev-server

在package.json中的scripts加入”dev”:”webpack-dev-server –config webpack.config.js”

然后在webpack.config.js中全局加入target:’web’，同时需要判断正式环境和开发环境：

安装cross-env可以保证我们在不同的平台执行同一个脚本,在package.json中的build下加入

1
2
"build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

当启动脚本的时候设置的环境变量全部都是设置在process.env里面的，可以在process.env中设置多个变量名并读取到这些变量。

然后设置当环境为production的时候，进行对server的配置：

1
2
3
4
5
6
7
8
9
10
11
if(isDev){
    config.devServer = {
        port:'8000',
        //设置成0.0.0.0好处是可以通过内网的IP进行访问，而localhost就不行
        host:'0.0.0.0',
        //当编译有错误的时候，可以将我们的错误显示到我们的网页上
        overlay:{
            errors:true
        }
    }
}

现在需要一个html页面来显示我们的内容：

首先安装一个插件：

1
npm i html-webpack-plugin

之后在最前面引入这个插件：

1
const HTMLPlugin = require('html-webpack-plugin')

并进行调用：

1
2
3
4
5
6
7
8
9
10
11
12
plugins: [
     // make sure to include the plugin!
     new VueLoaderPlugin(),
     new HTMLPlugin(),
     //这个是用来给wewbpack在编译的时候和js代码运行时判断环境
     //提供相关的框架去区分打包
     new webpack.DefinePlugin({
         'process.env':{
             NODE_ENV:isDev ? '"development"' : '"production"'
         }
     })
   ]

热加载

在config.devServer中设置

1
hot:true,

然后设置下面的两个选项：

1
2
3
4
config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new  webpack.NoEmitOnErrorsPlugin()
    )

并在前面引入webpack：

1
const webpack = require('webpack')

并且设置devtool

1
2
3
4
//这是帮助我们调试代码
  //利用sourcemap进行代码的映射，在浏览器中打开的还是我们正常写的代码。
  //提高效率和准确性
  config.devtool = '#cheap-module-eval-source-map'

最终，在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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
‘const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

const isDev = process.env.NODE_ENV === 'development'
const config = {
    target:'web',
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },{
                test:/\.css$/,
                use:[
                    'style-loader',
                    'css-loader'
                ]
            },{
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name]-aaa.[ext]'
                        }
                    }
                ]
            },{
                test:/\.styl/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            }
        ]
    },
    plugins: [
      // make sure to include the plugin!
      new VueLoaderPlugin(),
      new HTMLPlugin(),
      //这个是用来给wewbpack在编译的时候和js代码运行时判断环境
      //提供相关的框架去区分打包
      new webpack.DefinePlugin({
          'process.env':{
              NODE_ENV:isDev ? '"development"' : '"production"'
          }
      })
    ]
}

if(isDev){
    //这是帮助我们调试代码
    //利用sourcemap进行代码的映射，在浏览器中打开的还是我们正常写的代码。
    //提高效率和准确性
    config.devtool = '#cheap-module-eval-source-map'
    config.devServer = {
        port:'8000',
        //设置成0.0.0.0好处是可以通过内网的IP进行访问，而localhost就不行
        host:'0.0.0.0',
        //当编译有错误的时候，可以将我们的错误显示到我们的网页上
        overlay:{
            errors:true
        },
        //每次编译完成后都会打开浏览器
        //open:true
        //hot不会重新加载页面而是直接渲染组件。
        hot:true,
    }
    
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new  webpack.NoEmitOnErrorsPlugin()
    )
}
module.exports = config;

CSS分离：

之前的CSS代码在打包之后都是在同一个.js文件中，并且里面内容很多不容易找到，这时候需要利用相关的插件对CSS进行分离。

首先先npm i extract-text-webpack-plugin

然后在webpack.config.js文件中添加const ExtractPlugin = require(‘extract-text-webpack-plugin’)，这个就是将我们的非js代码单独打包成一个文件，因为这个文件有可能会作为缓存和利用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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const ExtractPlugin = require('extract-text-webpack-plugin')

const isDev = process.env.NODE_ENV === 'development'
const config = {
    target:'web',
    entry:path.join(__dirname,'src/index.js'),
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test:/\.vue$/,
                loader:'vue-loader'
            },
            {
                test:/\.jsx$/,
                loader:'babel-loader'
            },
            
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:1024,
                            name:'[name]-aaa.[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
      // make sure to include the plugin!
      new VueLoaderPlugin(),
      new HTMLPlugin(),
      //这个是用来给wewbpack在编译的时候和js代码运行时判断环境
      //提供相关的框架去区分打包
      new webpack.DefinePlugin({
          'process.env':{
              NODE_ENV:isDev ? '"development"' : '"production"'
          }
      })
    ]
}

if(isDev){
    config.module.rules.push({
        test:/\.css$/,
        use:[
            'style-loader',
            'css-loader'
        ]
    },{
        test:/\.styl/,
        use:[
            'style-loader',
            'css-loader',
            {
                loader:'postcss-loader',
                options:{
                    sourceMap:true,
                }
            },
            'stylus-loader'
        ]
    })
    //这是帮助我们调试代码
    //利用sourcemap进行代码的映射，在浏览器中打开的还是我们正常写的代码。
    //提高效率和准确性
    config.devtool = '#cheap-module-eval-source-map'
    config.devServer = {
        port:'8000',
        //设置成0.0.0.0好处是可以通过内网的IP进行访问，而localhost就不行
        host:'0.0.0.0',
        //当编译有错误的时候，可以将我们的错误显示到我们的网页上
        overlay:{
            errors:true
        },
        //每次编译完成后都会打开浏览器
        //open:true
        //hot不会重新加载页面而是直接渲染组件。
        hot:true,
    }
    config.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new  webpack.NoEmitOnErrorsPlugin()
    )
} else{
    config.output.filename = '[name].[chunkhash:8].js'
    config.module.rules.push({
        test:/\.styl/,
        use:ExtractPlugin.extract({
            fallback:'style-loader',
            use:[
                'css-loader',
                {
                    loader:'postcss-loader',
                    options:{
                        sourceMap:true,
                    }
                },
                'stylus-loader'
            ]
        })
    },{
        test:/\.css$/,
        use:ExtractPlugin.extract({
            fallback:'style-loader',
            use:[
                {
                    use:[
                        'css-loader'
                    ]
                }
            ]
        })
    })
    config.plugins.push(
        new ExtractPlugin('styles.[contentHash:8]')
    )
}
module.exports = config;
0%