Fork me on GitHub

Webpack学习笔记

Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行打包,它能有Grunt或Gulp所有基本功能。

  1. 支持commonJS和AMD模块。
  2. 支持很多模块加载器的调用,可以使模块加载器灵活定制,比如babel-loader加载器,该加载器能使我们使用ES6的语法来编写代码。
  3. 可以通过配置打包成多个文件,有效的利用浏览器的缓存功能提升性能。
  4. 使用模块加载器,可以支持sass,less等处理器进行打包且支持静态资源样式及图片进行打包。

安装webpack

  • 我们可以直接使用npm进行全局安装

    1
    npm install webpack -g
  • 在常规项目中把webpack依赖加入到package.json

    1
    npm init npm install webpack --save

webpak命令行

  • 启动

    1
    webpack
  • webpack实时编译

    1
    webpack --watch
  • 默认的配置文件webpack.config.js改成自定义文件

    1
    webpack --config customconfig.js

webpack.config.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
module.exports = {
entry: "./src/main.js",
output: {
filename: "build/build.js"
},
module: {
loaders: [
//.css 文件使用 style-loader 和 css-loader 来处理
{ test: /\.css$/, loader: "style!css" },
//.js 文件使用 jsx-loader 来编译处理
{ test: /\.js$/, loader: "jsx-loader" }
]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
plugins: []
};

Webpack提供了一套加载器,比如css-loader,less-loader,style-loader,url-loader等,用于将不同的文件加载到js文件中,比如url-loader用于在js中加载png/jpg格式的图片文件,css/style loader用于加载css文件,less-loader加载器是将less编译成css文件

可以尝试下实现https://webpack.github.io/docs/list-of-plugins.html里的Plugin