webpack15分钟搞定

来源：互联网发布：python批处理文件编辑：程序博客网时间：2024/05/29 20:00

Webpack的作用请自行百度，本文主要讲解Webpack的基础使用方法。

一、安装

安装Node.js（自行百度）。然后执行以下命令，将Webpack安装到全局环境，如果已经安装过的会重新覆盖不会有影响。

$ npm install webpack -g

一般情况下我们都会把它安装到依赖中，以便使用本地的Webpack。

进入项目文件夹中，创建package.json

$ npm init

安装 webpack 依赖

$ npm install webpack --save-dev

也可以安装指定版本

# 查看 webpack 版本信息$ npm info webpack# 安装指定版本的 webpack(--save是生产环境需要用到，--save-dev是开发环境需要用到)$ npm install webpack@1.12.x --save-dev

如果需要使用 Webpack 开发工具，要单独安装：

$ npm install webpack-dev-server --save-dev

二、使用

创建index.html和一个入口文件index.js

<!-- index.html --><!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>    </body></html>

// index.jsdocument.write('index输出');

执行编译index.js 打包到bundle.js

$ webpack index.js bundle.js

打包成功会显示日志：

$ webpack index.js bundle.jsHash: bfb389bb48705634d3e0Version: webpack 2.2.1Time: 74ms    Asset     Size  Chunks             Chunk Namesbundle.js  2.67 kB       0  [emitted]  main   [0] ./index.js 39 bytes {0} [built]

打开浏览器即可看到输出。

接下来添加一个模块 module.js 并修改入口 index.js：

// module.jsmodule.exports = 'It works from module.js.'

// index.jsdocument.write('index输出.')document.write(require('./module.js')) // 添加模块

重新打包并查看页面

三、Loader

Webpack只能处理js模块，Loader可以理解为资源转换器

安装loader：

npm install css-loader style-loader

在页面引入一个CSS文件index.html

/* index.css */body { background: #f66; }

重新编译打包刷新页面就可以看到页面的变化了。
Tips：
如果每次require CSS文件的时候都需要写前缀，很麻烦。我们根据模块类型（扩展名）来自动绑定需要的loader。
require(“!style!css!./style.css”) 修改为 require(“./style.css”) ，然后执行：

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'# 有些环境下可能需要使用双引号$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

可以查看这两种方式效果是一样的。

四、配置文件

webpack在编译打包的时候，不仅能在命令行内传入各种参数，也能在指定的配置文件内提前进行配置。默认情况下，会搜索当前目录的webpack.config.js文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 –config 选项来指定配置文件。

我们继续我们demo，创建一个webpack.config.js:

var webpack = require('webpack')module.exports = {  entry: './index.js',  output: {    path: __dirname,    filename: 'bundle.js'  },  module: {    loaders: [      {test: /\.css$/, loader: 'style-loader!css-loader'}    ]  }}

现在我们可以简化index.js中的css的加载方式。

require（'./style.js's）

最后运行

webpack

可以看到和运行

webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

是一样一样的。

0 0