一.webpack
1.安装
1.1 全局安装
npm install webpack -g
1.2 本地安装 ( 官方推荐本地安装 )
npm install webpack --save-dev
## 使用
如果是全局安装的：那么在命令行中就可以直接使用webpack的命令
如果是本地安装的：需要在package.json文件中配置scripts，进行命令的执行
1. 直接执行命令
webpack 入口文件 输出文件
2. 使用配置文件
1. 在当前目录下创建一个webpack.config.js
module.exports = {
entry: "",
output: {
path: "输出的目录路径",
filename: "文件名"
},
module:{
loaders: [
{
test: /文件后缀名的正则表达式/,
//加载器执行的顺序是从右向左的！
loader: "加载器名称!加载器名称"
}
]
},
plugins:[
new htmlWebpackPlugin()
]
}
1
var path = require(‘path‘)
2
var htmlWebpackPlugin = require(‘html-webpack-plugin‘)
3
module.exports = {
4
entry: ‘./main.js‘,
5
output: {
6
path: path.join(__dirname, "dist"),
7
filename: ‘build.js‘
8
},
9
module:{
10
loaders: [
11
{
12
test: /\.css$/,
13
loader: "style-loader!css-loader!autoprefixer-loader?browsers=last 5 version"
14
},
15
{
16
test: /\.less$/,
17
loader: "style-loader!css-loader!less-loader"
18
},
19
{
20
test: /\.(jpg|png|gif|jpeg|svg|woff2|ttf|woff|eot)$/,
21
loader: "url-loader?limit=102400"
22
},
23
{
24
test: /\.html$/,
25
loader: "html-loader"
26
}
27
]
28
},
29
//plugins属性用来配置webpack用到的插件
30
plugins: [
31
new htmlWebpackPlugin({
32
//你想最终复制那个文件到dist目录下，那么这个template属性，就设置成，文件的路径
33
template: ‘./index.html‘
34
}),
35
]
36
}
css： style-loader css-loader
less: less-loader less
给loader传递参数: ?
!是用来分隔加载器的
base64
当将以图片转换成base64格式进行存储的时候，体积会变大（大约30%），如果图片过大，那么转成base64，存储的容量大小会变得更大，所以，一般只会将比较小的图片，比较常用，转成base64存储，大的图片不做处理
一 .使用webpack转换es6代码
1. webpack知识补充
webpack官方推荐本地安装
npm install webpack -D
//当将webpack进行本地安装之后，如果没有做全局安装，那么就命令行中就没有webpack指令的可以调用
//所以想用webpack就需要进行配置！
//我们可以在npm的package.json文件中 的scripts对象中新增一个指令
{scripts: {"dev": "webpack"}}
//命令行:npm run dep
//package.json 文件中 scripts属性中可以新增一些指令
//这些指令可以通过 npm run 指令名称进行调用
//在调用的时候npm会自动帮我们打开一个shell，将这些命令当做shell命令进行执行
//会自动将当前目录中的node_modules中的内容加入到环境变量中！
2. 使用webpack转换es6代码步骤
2.1. 下载加载器（loader）包
npm install babel-loader babel-core -D
babel-loader
babel-core 是babel-loader依赖项
2.2. 去webpack.config.js中配置这个loader
module:{loaders:[{test: /\.js$/,loader: ‘babel-loader‘}]}
2.3. 由于babel也需要配置文件，所以我们需要创建一个.babelrc文件
presets： babel在进行代码转换的时候，需要遵守一些规则，这些规则有现成的，
babel-preset-es2015
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
上面的这些都不需要再用了，只需要一个即可
babel-preset-env
需要先下载
npm install babel-preset-env -D
{presets: ["env"]}
{"presets": [["env", {"targets": {"browsers": ["last 2 versions", "safari >= 7"]}}]]}
2.4. 直接运行 npm run dev 使用webpack打包，就能够将es6的代码转换成es5的内容了
3. babel
es6的一个编译器，这个东西有自己的独立的运行功能 可以下载 babel-cli,来进行es6的代码转换工作！
4.webpack-dev-server
webpack-dev-server生成的内容是在内存中的，不会帮你在dist目录中生成打包后的文件
开发的时候可以用webpack-dev-server，发布的时候，还是得手动的使用webpack进行打包操作
同步跟新,数据有变化时webpack自动跟新,不用重新webpack或npm run dev
配置packade.json文件
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server"
}
配置webpack.config.js文件
{devServer: {open: true,port: 9999,contentBase: "./src",hot: true},plugins:[new webpack.HotModuleReplacementPlugin()]}
命令行使用方式
//webpack-dev-server --open --port 9999 --contentBase src --hot