后台的模块化
node模块规范 commonjs
定义模块：一个JS文件就是一个模块
导出模块：exports/module.exports
使用模块：require
cmd seajs amd require
// 导出模块的两种方式
exports.world = function() {
console.log('Hello World');
}
module.exports = function() {
// ...
}
// 使用模块
var Hello = require('./hello');
前端es6支持模块化
esmodule 可以在浏览器中使用
UMD为了做兼容处理的
定义模块：一个JS就是一个模块
导出模块：export
使用(导入)模块：import拥有声明功能，底下变量不能重名
//a.js 中导出
export let str = "helloWorld";
export let str2 = "javascript";
// 在另一个文件中将内容解构出来
import {str, str2} from './a.js'
console.log(str, str2);
// same as
import * as b from './a.js'
console.log(b.str, b.str2);
如果一个文件只导出一个，那么用
export default
// b.js
let a = 1;
export default a;
// main.js 导入可以自己起名字
import xxx from "./b.js"
webpack
初始化第一步：
cnpm init -y会生成一个package.json配置文件
npm install webpack --save-dev
npm install webpack-cli --save-dev
安装最好不要安装全局，否则可能导致版本差异
在package.json中配置一个脚本，这个脚本用的命令是webpack，回去当前的node_modules下找bin对应的webpack名字让其执行，执行的就是bin/webpack.js，webpack.js需要当前目录下有个名字叫webpack.config.js的文件，我们通过npm run build执行的目录是当前文件的目录，所以会去当前目录下查找。解决了模块的问题，不管是node里面的还是es6模块都支持。会把每个模块都放在一个闭包里，防止冲突，但是es6语法不会默认转化为es5。
配置文件webpack.config
// webpack必须采用commonjs写法
// 专门处理路径的,以当前路径解析出一个绝对路径
let path = require('path');
module.exports = {
// 打包的入口文件 webpack会自动查找相关的以来进行打包
// 配置一个入口
// entry: './src/main.js',
// 多个入口要写一个对象
entry: {
main: './src/main.js',
main1: './src/main.js'
}，
output: {
// 打包后的名字 会自动去匹配入口中的名字
filename: '[name].js',
// 必须是绝对路径
path: path.resolve('./dist')
}
};
babel转义 es6 -> es5
npm install babel-core --save-dev
npm install babel-loader --save-dev
解析规则
-js 匹配所有的js 用babel-loader转译，排除掉node_modules
// webpack.config.js
module: {
rules: [
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
依然解析成ES6代码，因为babel此时并不晓得ES5语法长什么样子，因此还需要一个插件
babel-preset-es2015让babel拥有解析es6语法的功能
安装完插件还需要有一个.babelrc文件来预设es2015
{
"presets": ["es2015"]
}
babel-preset-stage-0插件解析es7语法
"presets": ["es2015","stage-0"]
解析样式
css-loader将css解析成模块 将解析的内容插入到style标签里style-loader
配置文件里的模块规则也要加上
module: {
rules: [
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
// use是从右往左写先转换成样式再插入style
{test: /\.css$/, use: ['style-loader', 'css-loader']}
]
}
less sass stylus预处理语言
less-loaderless
sass-loadersass
stylus-loaderstylus
module: {
rules: [
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
// use是从右往左写先转换成样式再插入style
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}
]
}
解析图片
在JS中引入图片需要import或者 线上路径，否则webpack会把路径当做字符串处理，编译之后的路径就不对了
file-loaderurl-loader（依赖于file-loader）的
module: {
rules: [
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
// use是从右往左写先转换成样式再插入style
{test: /\.css$/, use: ['style-loader', 'css-loader']},
{test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
{test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader'},
{test: /\.(eot|svg|woff|woff2|wtf)$/, use: 'url-loader'}
]
}
默认会转成base64的，可以设置限制
{test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=8192'}
html解析插件
以我们自己的html为模板将打包后的结果自动引入到html中产出到dist目录下
html-webpack-plugin
在配置文件中引入之后，创建一个新的实例，把自己打包好的模板插入进去
// 开头引入
let HtmlWebpackPlugin = require('html-webpack-plugin');
// 将自己写好的页面当做模板引入进去
plugins: [
new HtmlWebpackPlugin({ // Also generate a test.html
template: 'src/index.html'
})
]
自动更新
webpack-dev-server
内置了服务，可以帮我们启动一个端口号，当代码更新时，可以自动打包（内存中打包），代码有变化就重新执行，用法跟webpack一样，当npm run dev时，就会自动去找node_modules目录下的webpack-dev-server，但是若更改配置文件就需要重新运行
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
}
解析vue
vue-loader解析.vue文件 ，会自动调用vue-template-compiler
直接引用vue引用的是vue的runtime，而vue由两部分组成， 即vue = compiler + runtime（compiler可以编译模板），因此还需要一个编译模板的插件vue-template-compiler
// webpack.config.js文件
let VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
module: {
rules: [
{test: /\.vue$/, use: 'vue-loader'}
]
},
plugins: [
new VueLoaderPlugin()
]
}