webpack工程化小程序开发

webpack工程化小程序开发

使用 webpack, babel, scss 开发的微信小程序项目脚手架，git源码地址：https://github.com/webpersonalserver/wx-mini

1、新建项目文件（如：wx-mini）

2、创建package.json文件

进入项目文件夹（wx-mini）下，执行命令 npm init，按照提示填写项目基本信息，生成package.json

3、安装项目依赖包（或插件包）

1. npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-eslint babel-plugin-lodash babel-plugin-transform-runtime 安装babel，babel的作用是将es6的语法编译成浏览器认识的语法es5
2. npm install --save-dev file-loader 用于打包文件
3. npm install --save-dev sass-loader node-sass 用于编译sass
4. npm install webpack wxapp-webpack-plugin wxml-loader xml-loader copy-webpack-plugin cross-env 用于webpack.config.babel.js配置<注意：webpack版本为3.X.X，4.X.X会有一定的问题，如果使用4.X.X，需要对webpack.config.babel.js配置文件做一定的修改>
5. npm install --save lodash 一个一致性、模块化、高性能的 JavaScript 实用工具库

4、项目目录构建

结构图展示：

（1）新建src文件夹（项目开发文件都在其中），然后分别在里面新建components、images、pages、sass、utils、app.js、app.json、app.wxss;

• components：主要用于存放组件开发文件；
• images：主要用于项目图标或图片<注意：处于项目包体大小考虑，建议采用在线图片形式，以减少包体大小>；
• pages：用于存放页面，每个页面就是一个文件夹，分别由js、json、wxss、wxml文件构成（注意：这里采用scss、xml文件开发，通过webpack编译处理程小程序的wxss、wxml文件）；
• sass：主要用于存放各种公用scss文件；
• utils：主要用于存放各种工具类、全局方法等；
• app.js、app.json、app.wxss：小程序实例文件，具体可查看小程序官方文档（https://developers.weixin.qq.com/miniprogram/dev/index.html）

（2）新建webpack.config.babel.js，用于编译打包小程序

/**
 * webpack配置文件
 */
import path, {
  resolve
} from 'path';
import { DefinePlugin, EnvironmentPlugin } from 'webpack';
import webpack from 'webpack';
import WXAppWebpackPlugin from 'wxapp-webpack-plugin';
import CopyWebpackPlugin from 'copy-webpack-plugin';

const {