webpack工程化小程序开发
webpack编译打包构建小程序
- webpack工程化小程序开发
-
- 1、新建项目文件（如：wx-mini）
- 2、创建package.json文件
- 3、安装项目依赖包（或插件包）
- 4、项目目录构建
- 5、在项目个目录下，新建 .babelrc 文件，用来将es6转化为es5
- 6、执行 npm run dev 或 yarn dev (如果有安装yarn)，生成dist文件，将整个dist文件放入微信开发者工具即可
- 7、执行npm run build 或 yarn build (如果有安装yarn),打包正式文件，之后将整个dist文件上传到个人微信公众平台即可
- 8、如果需要将项目推送到远程git，可以添加 .gitignore 文件，用来过滤不需提交的文件，如：
- 9、eslint代码规范检测
- 10、webpack自带一个插件uglifyjs-webpack-plugin来压缩js
- 11、打包时，去掉js中的console、debugger等
- 12、压缩wxml、wxss、json文件
webpack工程化小程序开发
使用 webpack, babel, scss 开发的微信小程序项目脚手架，git源码地址：https://github.com/webpersonalserver/wx-mini
1、新建项目文件（如：wx-mini）
2、创建package.json文件
进入项目文件夹（wx-mini）下，执行命令 npm init，按照提示填写项目基本信息，生成package.json
3、安装项目依赖包（或插件包）
- 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
- npm install --save-dev file-loader 用于打包文件
- npm install --save-dev sass-loader node-sass 用于编译sass
- 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配置文件做一定的修改>
- 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 { NODE_ENV } = process.env;
const environment = NODE_ENV;
const srcDir = resolve('src');
const relativeFileLoader = (ext = '[ext]') => {
return {
loader: 'file-loader',
options: {
useRelativePath: true,
name: `[name].${ext}`,
context: srcDir
}
};
};
export default {
entry: {
app: [
'./src/app.js',
],
},
output: {
filename: '[name].js',
publicPath: '/',
path: resolve('dist'),
},
resolve: {
modules: [resolve(__dirname, 'src'), 'node_modules'],
alias: {
'src': resolve(__dirname, './src'),
'components': resolve(__dirname, './src/components'),
'images': resolve(__dirname, './src/images'),
'sass': resolve(__dirname, './src/sass')
}
},
module: {
rules: [{
test: /\.js$/,
include: /src/,
use: [
'babel-loader',
].filter(Boolean)
},
{
test: /\.(json|png|jpg|gif)$/,
include: /src/,
use: relativeFileLoader()
},
{
test: /\.(scss|wxss)$/,
include: /src/,
use: [
relativeFileLoader('wxss'),
{
loader: 'sass-loader',
options: {
includePaths: [resolve('src', 'styles'), srcDir]
}
}
]
},
{
test: /\.(wxml|axml|xml)$/,
include: /src/,
use: [
relativeFileLoader('wxml'),
{
loader: 'wxml-loader',
options: {
root: srcDir,
enforceRelativePath: true
}
}
]
}
]
},
plugins: [
new EnvironmentPlugin({
NODE_ENV: 'development'
}),
new DefinePlugin({
ENVIRONMENT: JSON.stringify(environment)
}),
new CopyWebpackPlugin([{
from: __dirname + '/src/images',
to: __dirname + '/dist/images'
},
{
from: __dirname + '/src/components',
to: __dirname + '/dist/components',
ignore: ['*/*.xml']
},
{
from: '**/*.wxml',
to: 'pages',
context: path.join(__dirname, 'src/pages')
}
], {
ignore: [
'**/*.scss',
'**/*.js'
]
}),
new WXAppWebpackPlugin()
],
watchOptions: {
ignored: /dist|manifest/,
aggregateTimeout: 300,
}
};
（3）在package.json文件中加入指令
"dev": "cross-env NODE_ENV=development webpack --watch"（用于开发，开发环境）
"build": "cross-env NODE_ENV=production webpack -p"（用于打包上线，生产环境）
"webpack": "webpack"
5、在项目个目录下，新建 .babelrc 文件，用来将es6转化为es5
{
"presets": ["es2015"]
}
6、执行 npm run dev 或 yarn dev (如果有安装yarn)，生成dist文件，将整个dist文件放入微信开发者工具即可
7、执行npm run build 或 yarn build (如果有安装yarn),打包正式文件，之后将整个dist文件上传到个人微信公众平台即可
8、如果需要将项目推送到远程git，可以添加 .gitignore 文件，用来过滤不需提交的文件，如：
在根目录下新建 .gitignore 文件
# 文件忽略规则
# *.a 忽略所有 .a 结尾的文件
# !lib.a 除lib.a文件
# /TODO 仅仅忽略项目根目录下的 TODO 文件，不包括 subdir/TODO
# build 忽略 build/ 目录下的所有文件
# doc/*.txt 忽略doc/notes.txt ，但不包括 doc/server/arch.txt
# 忽略依赖包
node_modules
# 忽略编译打包后的文件
dist
# 忽略微信开发者工具生成文件
package-lock.json
# 忽略编辑器生成的文件
.project
9、eslint代码规范检测
（1）安装依赖
npm install --save-dev eslint eslint-config-standard eslint-friendly-formatter eslint-import-resolver-webpack eslint-loader eslint-plugin-flow-vars eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
（2）在根目录下新建 .eslintrc.js 文件
module.exports = {
//此项是用来告诉eslint找当前配置文件不能往父级查找
root: true,
//此项是用来指定eslint解析器的，解析器必须符合规则，babel-eslint解析器是对babel解析器的包装使其与ESLint解析
parser: 'babel-eslint',
//此项是用来指定javaScript语言类型和风格，sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
parserOptions: {
// 设置 script(默认) 或 module，如果代码是在ECMASCRIPT中的模块
sourceType: 'module',
"ecmaVersion": 6,
"ecmaFeatures": {
"jsx": true
}
},
// 此项指定环境的全局变量，下面的配置指定为浏览器环境
env: {
"browser": true,
"node": true,
"commonjs": true,
"es6": true,
"amd": true
},
/*
下面这些rules是用来设置从插件来的规范代码的规则，使用必须去掉前缀eslint-plugin-
主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致
"off" -> 0 关闭规则
"warn" -> 1 开启警告规则
"error" -> 2 开启错误规则
*/
rules: {
// 提示错误
"no-unused-vars": 2,
"no-use-before-define": 2,
"block-scoped-var": 2,
"no-var": 2,
// 提示警告
"no-empty": 1,
"no-extra-parens": 1,
"no-extra-semi": 1,
"eqeqeq": 1,
"eol-last": 1,
"no-mixed-spaces-and-tabs": 1,
"no-multiple-empty-lines": 1,
"prefer-arrow-callback": 1
}
}
（3）在项目根目录下新建 .eslintrc 文件，修改webpack.config.babel.js文件，加入：
{
test: /\.js$/,
include: /src/,
loader: 'eslint-loader',
options: {
formatter: require('eslint-friendly-formatter'),
emitWarning: true
}
}
10、webpack自带一个插件uglifyjs-webpack-plugin来压缩js
（1）安装依赖
npm install uglifyjs-webpack-plugin --save-dev
（2）配置webpack.config.babel.js文件
（1）引用：import uglifyPlugin from 'uglifyjs-webpack-plugin';
（2）配置：plugins:[
new uglifyPlugin()
]
11、打包时，去掉js中的console、debugger等
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
drop_debugger: true,
drop_console: true
}
})
12、压缩wxml、wxss、json文件
（1）安装依赖
npm install --save-dev gulp gulp-htmlmin gulp-pretty-data
（2）项目根目录下新建 gulpfile.js 文件，内容如下：
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const prettyData = require('gulp-pretty-data');
gulp.task('minify', function () {
// 压缩wxml
gulp.src('dist/**/*.wxml')
.pipe(htmlmin({
removeComments: true, // 清除wxml注释
collapseWhitespace: true, // 压缩wxml
removeEmptyAttributes: true // 删除所有空格作属性值 ==>
}))
.pipe(gulp.dest('dist'));
// 压缩json、wxss、wxml
gulp.src('dist/**/*.{json,xml,css}')
.pipe(prettyData({
type: 'minify',
preserveComments: true,
extensions: {
'wxml': 'xml',
'wxss': 'css'
}
}))
.pipe(gulp.dest('dist'))
});
（3）执行 gulp minify 压缩文件，可以在package.json文件的scripts中加入 “minify”: “cross-env NODE_ENV=production webpack -p && gulp minify”，这样既可在上生产时，编译压缩打包