Webpack入门（详细）

来源：互联网发布：mp5淘宝编辑：程序博客网时间：2024/05/19 13:44

介绍

webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片(压缩)等都作为模块来使用和处理。更具体的学习可以看官方文档https://webpack.js.org/concepts/这里是根据webpack2.0版本的

优点

webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
能被模块化的不仅仅是 JS 了，还有CSS，图片等。
开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
并且github上有很多项目是基于webpack构建的

安装

前提条件
在开始前，先要确认你已经安装 Node.js 的最新版本。使用 Node.js 最新的 LTS 版本，是理想的起步。使用旧版本，你可能遇到各种问题，因为它们可能缺少 webpack 功能或缺少相关 package 包。
本地安装，先建立webpack-demo文件，在webpack-demo/app下建立index.js(方便测试),再安装webpack

npm install --save-dev webpacknpm install --save-dev webpack@<version>

全局安装（可以先全局安装，才能直接使用webpack命令，在具体的项目中局部安装）

npm install --global webpack

注意，不推荐全局安装 webpack。这会锁定 webpack 到指定版本，并且在使用不同的 webpack 版本的项目中可能会导致构建失败。

配置

先生成package.json

npm init

再创建
webpack.config.js,
每个项目下都必须配置有一个 webpack.config.js,告诉webpack该干什么。
注意整个配置中我们使用 Node 内置的 path 模块

var path = require('path');module.exports = {    // 单页面入口文件    entry:  './app/index.js',    /* 多入口       entry:['./app/index.js','./app/index1.js']      */     /* 对象     entry:{name: './app/index.js',home: './app/index1.js'}     */    // 入口文件输出配置    output: {        filename: 'bundle.js',        path: path.resolve(__dirname, 'dist')    }};

运行

webpack 默认是运行webpack.config.js
命令：

> webpack

最终会在/dist下生成bundle.js文件

如果修改webpack.config.js为mywebpack.config.js，则运行需要修改

webpack --config mywebpack.config.js

再运行webpack即可

如果你在项目中使用了 npm scripts（在package.json中加入），npm 首先会在本地模块中寻找 webpack。这是一个实用的小技巧。

"scripts": {    "start": "webpack --config mywebpack.config.js"}

运行npm run start即可

其它参数

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）来打包$ webpack --watch   //监听变动并自动打包$ webpack -p    //压缩混淆脚本，这个非常非常重要！$ webpack -d    //生成map映射文件，告知哪些模块被最终打包到哪里了$ webpack --progress //显示进度条$ webpack --color //添加颜色

其中的 -p 是很重要的参数，曾经一个未压缩的 700kb 的文件，压缩后直接降到 180kb（主要是样式这块一句就独占一行脚本，导致未压缩脚本变得很大）。

插件

html插件
安装

npm install html-webpack-plugin --save-dev

使用

var path = require('path');// 引入插件var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: {        home: './app/index.js',        work: './app/index1.js'    },    output: {        filename: 'js/[chunkhash]bundle.js',        path: path.resolve(__dirname, 'dist')    },    // 插件应用    plugins: [        new htmlWebpackPlugin({            template: 'index.html'        })    ]};

自动打包插件

module.exports = {  // …  plugins: [    new webpack.optimize.CommonsChunkPlugin({      name: "commons",      filename: "commons.js",      minChunks: 2,    }),  ],// …};

如果有任意模块加载了两次或更多（通过 minChunks 设置该值），它就会被打包进一个叫 commons.js 的文件里，后面你就可以在客户端缓存这个文件了。

开发

实际上 Webpack 有它自己的开发服务器，通过 devServer 对象可以创建一个服务器：

module.exports = {  context: __dirname + "/src",  entry: {    app: "./app.js",  },  output: {        filename: 'js/[chunkhash]bundle.js',        path: path.resolve(__dirname, 'dist')  },  devServer: {    contentBase: __dirname + "/src",    },};

运行

// 安装npm install --save-dev webpack-dev-server// 运行webpack-dev-server

如果不能运行，尝试

node_modules/.bin/webpack-dev-server

服务器现在就运行在了 localhost:8080 上。

Loader

目前为止，我们所讲到的都是关于 JavaScript 代码的使用。从 JavaScript 代码开始是非常重要的，因为这是 Webpack 唯一使用的语言。我们可以处理任何文件类型，只要将它们传进 JavaScript 代码中。这个功能用 Loaders 来实现。

一个 loader 可以指向一个像 Sass 的预处理器，或者像 Babel 的编译器。

安装使用步骤

1. install loader2. module中配置

Babel+ES6

安装

npm install --save-dev babel-loadernpm install babel-core --save-dev// 安装ES2015支持npm install babel-preset-es2015 --save-dev

配置

var path = require('path');var htmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: './src/app.js',    output: {        filename: 'js/bundle.js',        path: path.resolve(__dirname, 'dist')    },    plugins: [        new htmlWebpackPlugin({            template: 'index.html'        })    ],    module: {        rules: [{                test: /\.js$/,                use: ['babel-loader'],                options: { presets: ['es2015'] }            }            // Loaders for other file types can go here        ],};

这样就完成了

css-loader

install

npm install css-loader style-loader --save-dev

配置

    module: {        rules: [{                test: /\.js$/,                loader: 'babel-loader',                options: { presets: ['es2015'] }            }, {                test: /\.css$/,                use: ['style-loader', 'css-loader']            }            // Loaders for other file types can go here        ],

sass-loader

安装。由于需要node-sass配合，也一起安装

npm install sass-loader --save-devnpm install node-sass --save-dev

如果不成功，可以用淘宝镜像安装

npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass

配置

{     test: /\.scss$/,      use: ['style-loader', 'css-loader', 'sass-loader']}

常用loader
1. 处理样式，转成css，如：less-loader, sass-loader
2. 图片处理，如: url-loader（以base64显示）, file-loader，image-webpack-loader(压缩图片)。（url-loader、file-loader)两个都必须用上。否则超过大小限制的图片无法生成到目标文件夹中
3. 处理js，将es6或更高级的代码转成es5的代码。如： babel-loader，babel-preset-es2015，babel-preset-react
4. 将js模块暴露到全局，如果expose-loade

阅读全文

0 0