一.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官方推荐本地安装

1. npm install webpack -D

//当将webpack进行本地安装之后，如果没有做全局安装，那么就命令行中就没有webpack指令的可以调用

//所以想用webpack就需要进行配置！

//我们可以在npm的package.json文件中 的scripts对象中新增一个指令

1. {
2. scripts: {
3. "dev": "webpack"
4. }
5. }

//命令行:npm run dep

//package.json 文件中 scripts属性中可以新增一些指令

//这些指令可以通过 npm run 指令名称进行调用

//在调用的时候npm会自动帮我们打开一个shell，将这些命令当做shell命令进行执行

//会自动将当前目录中的node_modules中的内容加入到环境变量中！

2. 使用webpack转换es6代码步骤

2.1. 下载加载器（loader）包

1. npm install babel-loader babel-core -D

babel-loader

babel-core        是babel-loader依赖项

2.2. 去webpack.config.js中配置这个loader

1. module:{
2.     loaders:[
3.         {
4.             test: /\.js$/,
5.             loader: ‘babel-loader‘
6.         }
7.     ]
8. }

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

需要先下载

1. npm install babel-preset-env -D

1. {
2.     presets: [
3.         "env"
4.     ]
5. }

1. {
2.   "presets": [
3.     ["env", {
4.       "targets": {
5.         "browsers": ["last 2 versions", "safari >= 7"]
6.       }
7.     }]
8.   ]
9. }

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文件

1. {
2. devServer: {
3. open: true,
4. port: 9999,
5. contentBase: "./src",
6. hot: true
7. },
8. plugins:[
9. new webpack.HotModuleReplacementPlugin()
10. ]
11. }

命令行使用方式

//webpack-dev-server --open --port 9999 --contentBase src --hot

原文地址：https://www.cnblogs.com/pavilion-y/p/8178311.html