webpack入门

WebPack的安装

安装命令
```
$ npm install webpack -g
```

使用webpack

$ npm init  # 会自动生成一个package.json文件
$ npm install webpack --save-dev #将webpack增加到package.json文件中

如果想要安装开发工具

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

WebPack开始使用

这里有最基本的使用方法，给大家一个感性的认识

正确安装了WebPack，方法可以参考上面

书写entry.js文件

document.write("看看如何让它工作！");

书写index.html文件

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>

执行命令，生成bundle.js文件
```
$ webpack ./entry.js bundle.js
```
在浏览器中打开index.html文件，可以正常显示出预期

增加一个content.js文件

module.exports = "现在的内容是来自于content.js文件！";

修改entry.js文件

document.write(require("./content.js"));

执行第四步的命令

进行加载器试验

增加style.css文件
```
body {
background: yellow;
}
```

修改entry.js文件

require("!style-loader!css-loader!./style.css"); document.write(require("./content.js"));

(这里要注意，webpack2不支持简写!style!css!./style.css，亲试)

执行命令，安装加载器

$ npm install css-loader style-loader   # 安装的时候不使用 -g

执行webpack命令，运行看效果

可以在命令行中使用loader

$ webpack ./entry.js bundle.js --module-bind "css=style!css"

配置文件

创建我们webpack的配置文件webpack.config.js：（这个文件需要手码的哦）

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

module.exports = {
    entry: "./main.js",
    output: {
        path: './build', // 图片和 JS 会打包到这里来
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },

            {
                test: /\.less$/,
                loader: 'style-loader!css-loader!less-loader'
            }, // 用 ! 来连接多个 loader

            {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=8192'
            } // 内联 base64 URLs, 限定 <=8k 的图片, 其他的用 URL

        ]
    },
    resolve: {
        extensions: ['', '.js', '.json', 'coffee']
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]

}

对这个配置文件解释下：

1) entry：entry可以是个字符串或数组或者是对象。指定打包的入口文件，一个键值对，就是一个入口文件

2) output：包结果文件的名称,在这里我指定它在./build的文件夹打包输出

3) resolve：用于指明程序自动补全识别哪些后缀,
注意一下, extensions 第一个是空字符串! 对应不需要后缀的情况.

4) module：以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

1.js的引用

比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装

2.样式及图片的引用

require('./bootstrap.css'); require('./myapp.sass'); var img = document.createElement('img'); img.src = require('./glyph.png');

当你引用 CSS(或者 SASS 吧), Webpack 会将 CSS 内联到 JavaScript 包当中, require() 会在页面当中插入一个<style>标签. 当你引入图片, Webpack 在包当中插入对应图片的 URL, 这个 URL 是由require()返回, 而图片可能被转化成 base64 格式的 dataUrl。但是注意，所有这些要在 webpack.config.js 文件写好对应的 loader:

5) plugins: 这里定义了需要使用的插件，

比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js

这里还配置了NoErrorsPlugin插件，用来跳过编译时出错的代码并记录，使编译后运行时的包不会发生错误：当然Webpack还有很多其他的配置，具体可以参照它的配置文档

发布服务器

安装运行服务器

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

服务器可以自动生成和刷新，修改代码保存后自动更新画面

打开http://localhost:8080/webpack-dev-server/bundle可以看到编译后的网页，这会绑定一个小型express服务器到localhost:8080，来为你的静态资源及bundle（自动编译）服务。通过访问http://localhost:8080/webpack-dev-server/bundle，bundle每次重编译后浏览器页面都会自动更新。

posted @ 2017-03-01 22:16 朱帅阅读(117) 评论(0) 编辑收藏举报

刷新页面返回顶部

AfterA11