webpack4开发小程序

Webpack是一个现代化的静态模块打包器，能够将各种类型的文件转换为JavaScript文件，同时还能打包所有的资源文件（如CSS、HTML等）和JavaScript模块。在小程序开发中，我们可以使用webpack来实现代码的打包和优化，提升小程序的性能。

一、小程序webpack基础配置

首先，我们需要创建一个基础的webpack配置文件，包含以下几个配置项：

1.入口文件

我们需要指定入口文件，即小程序的App.js文件，代码如下：

```

entry:{

app:'./app.js'

}

```

2.输出文件

我们还需要指定生成的输出文件的位置和名称，代码如下：

```

output:{

path: __dirname + '/dist',

filename:'app.js'

}

```

3.模块转换器

我们需要使用模块转换器将ES6和Sass编写的代码转换为小程序支持的语言规范，需要使用以下两个包：

```

babel-loader

sass-loader

```

我们需要在webpack配置文件中配置这两个模块转换器，代码如下：

```

module:{

rules:[

{

test: /\.js$/,

exclude: /(node_modules|bower_components)/,

use: [{

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env']

}

}]

},

{

test: /\.scss$/,

use: [

'style-loader',

MiniCssExtractPlugin.loader,

{

loader:'css-loader',

options:{

sourceMap:true

}

},

{

loader:'sass-loader',

options:{

sourceMap:true

}

}

]

}

]

}

```

其中，js文件转换使用babel-loader模块，sass文件转换使用sass-loader和css-loader模块。

4.插件

我们需要使用一些插件来优化小程序的性能和开发体验，常用的插件有以下几个：

```

MiniCssExtractPlugin //将css文件单独打包

UglifyJsPlugin //压缩代码

CopyWebpackPlugin //复制静态资源到打包文件夹中

DefinePlugin //设置全局变量

ProgressPlugin //显示打包进度

```

我们需要在webpack配置文件中配置这些插件，代码如下：

```

plugins:[

new MiniCssExtractPlugin({

filename: 'app.wxss'

}),

new UglifyJsPlugin(),

new CopyWebpackPlugin([{

from: __dirname+"/assets",

to:__dirname+"/dist/assets"

}]),

new webpack.DefinePlugin({

'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)

}),

new webpack.ProgressPlugin()

]

```

以上是小程序基础的webpack配置，可以按照以上配置进行开发。

二、小程序webpack进阶

在小程序的webpack开发中，我们还可以进一步优化打包工具，提高小程序的性能和开发体验：

1.使用小程序插件

我们可以使用小程序插件来增强webpack的功能，例如小程序官方开源的wepy-loader就是一个不错的选择。使用wepy-loader可以将小程序中的wepy框架代码进行转化，并进行优化。

2.使用webpack的热更新

使用webpack的热更新可以使代码自动更新，开发过程中无需手动刷新页面。我们可以在webpack配置文件中添加以下代码，实现热更新：

```

module.exports = {

// ...

devServer: {

//启动热更新

contentBase: path.join(__dirname, 'src'),

compress: true,

port: 9000,

//启用热更新

hot:true

},

//...

}

```

3.使用webpack的DllPlugin

使用webpack的DllPlugin可以将小程序常用的库进行单独打包，提高打包速度，减少打包体积。我们可以在webpack配置文件中添加以下代码来使用DllPlugin：

```

const DllPlugin = require('webpack/lib/DllPlugin');

module.exports = {

entry: {

'vue-lib': ['vue','vue-router','vuex'],

'weui-lib': ['weui.js','weui.css']

},

output: {

path: path.resolve(__dirname,'dist','[name].bundle.js'),

library: '[name]_library'

},

plugins: [

new DllPlugin({

name: '[name]_library',

path: path.resolve(__dirname,'dist','[name]-manifest.json')

})

]

}

```

以上是小程序webpack的原理和详细介绍，大家可以通过这篇文章了解到如何使用webpack来优化小程序的性能和开发体验。