WEBPACK 入门

时间 2019-11-09

标签 webpack 入门繁體版

原文原文链接

webpack 入门

1. 什么是webpack

官网介绍：webpack是一个模块打包器。webpack 处理带有依赖关系的模块，生成一系列表示这些模块的静态资源。(webpack is a module bundler.webpack takes modules with dependencies and generates static assets representing those modules.)。javascript

webpack会把各类资源(js,png,css,less,等等)都做为模块来使用和处理,最后转化成一系列的静态资源。css

webpack都是怎么处理这些静态资源的呢？html

webpack提供了一系列的模块加载器（loader）来编译这些模块。好比处理less文件，webpack提供了less-loader将less文件处理成css，而后再经过css-loader加载成css模块，最后由style-loader加载器对其作最后的处理,等等。固然，你还能够定制本身的加载器处理本身的特需需求。java

2. 为何使用webpack

对于单页应用来讲，随着项目的发展，在一个页面中的javascript代码会愈来愈多，引入的js库会愈来愈多，这时候就须要把javascript代码模块化，这样才能便于管理和后期的维护。对于一个新项目来讲,推荐使用Commonjs规范来编写代码，可是webpack为了兼容之前的旧代码，又同时支持CMD和AMD规范。node
对于使用react开发项目的团队来讲，webpack是必不可少的react开发神器。webpack中的react-hot-loader插件能够轻松实现react中模块组件的热替换，无刷新页面就能够实时查看页面所作的修改。有这样的功能，谁还会拒绝使用webpack呢？react

3. 使用webpack

npm install webpack -g

安装成功后执行webpack -V 命令行会输出webpack的版本后和webpack所有的options（选项）。webpack

咱们在当前项目根目录下新建一个webpack.config.js文件，为webpack命令配置选项。固然你还能够经过命令行的方式来配置，可是那样太麻烦，每次执行都要敲一大堆命令，想一想没人会这么干。es6

一个简单的webpack配置以下所示:web

var webpack = require("webpack");
    var path = require("path");

    module.exports = {
        entry: './src/main.js', //入口文件,webpack会从入口文件出开始查找依赖递归进行打包
        output: {
            path: path.join(__dirname, 'www'),　　//打包后的文件位置
            filename: 'js/bundle.js',　　//打包后的文件名
        },
        module: {
        loaders: [　　//配置模块加载器,数组形式
            { test: /\.(js|jsx)$/, loaders: ['babel?presets[]=react,presets[]=es2015'] },//babel加载器用于将es6转化成es5,使用前请先安装babel-loader再引入加载器
            ],
        }
    };

在src下建立一个main.js做为入口文件：npm

在main.js写入如下内容:

document.write('study webpack!');

保存文件，在项目根目录下执行webpack命令后就会在www/js目录下生产打包后的bundle.js文件

而后咱们在www目录下的index.html文件中直接用script标签引入这个生成的bundle.js就ok了。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>
<!--引入生成的bundle.js-->
<script type="text/javascript" src="./js/bundle.js"></script>
</body>
</html>

在浏览器中打开index.html。
能够看到页面出现了main.js中咱们要打印的内容：

4. 安装webpack开发服务器(webpackd-dev-server)

webpack不只提供了模块打包功能,还为开发者提供了一个开发服务器,这个开发服务器会监听文件中的每个改动,文件改动会触发浏览器自动刷新页面,实时查看本身代码中的修改。执行下面命令做为依赖安装webpack-dev-server:

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

在webpack.config.js同级目录下,新建一个server.js,配置webpack-dev-server参数。为了使热替换生效必须在如下三个位置配置信息：

在server.js中设置hot:true参数
在webpack.config.js的entry中加入'webpack/hot/dev-server
在webpack.config.js的plugins中加入HotModuleReplacementPlugin

具体配置信息以下：

server.js配置:

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');
new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,　　//开启热调试
    historyApiFallback: true
}).listen(3000, '127.0.0.1', function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log('server start');
});

webpack.config.js也要作修改:

var path = require('path');
var webpack = require('webpack');

module.exports = (function( ) {
    var config = {
        entry: [
            'webpack-dev-server/client?http://127.0.0.1:8000',
            'webpack/hot/dev-server',
            './src/main.js'
        ],
        output: {
            path: path.join(__dirname, 'www'),
            filename: 'js/bundle.js',
            publicPath: '/www/'
        },
        module: {
            loaders: [
            ],
        }
    };

    config.plugins = [
        new webpack.NoErrorsPlugin(), //容许错误不打断程序
        new webpack.HotModuleReplacementPlugin(),　　//webpack热替换插件
    ];


    return config;

})();

修改main.js中的内容:

document.write('study webpack by webpack-dev-server);

修改事后执行以下命令:

node server.js

当在命令行看到

webpack: bundle is now VALID.

说明打包成功。咱们刷新页面，能够发现页面发生了变化。

而且控制台出现了两条语句

HMR前缀的信息由webpack/hot/dev-server模块产生，WDS前缀的信息由webpack-dev-server客户端产生。（Messages prefixed with [HMR] originate from the webpack/hot/dev-server module. Messages prefixed with [WDS] originate from the webpack-dev-server client.）

咱们能够发如今www/js/目录下并无产生bundle.js,由于经过webpack-dev-server打包出来的文件并无实质性的生成存储在磁盘中,而是生成保存在内存中。每次执行node server.js 太繁琐,咱们能够在package.json中为这条命令另起别名:

这样咱们每次只要执行npm start就能够启动webpack-dev-server了。

原文做者来自MaxLeap 团队_cloud成员：zhiyingzzhou
原文连接：https://blog.maxleap.cn/archives/727

欢迎关注微信订阅号：从移动到云端欢迎加入咱们的MaxLeap活动qq群：555973817，咱们将不按期作技术分享活动。

1. 【 webpack 】- 2 webpack入门
2. webpack入门
3. webpack入门（2）
4. 入门Webpack
5. Webpack入门
6. webpack入门（1）
7. webpack 入门一
8. webpack 入门
9. Webpack入门（三）
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Neo4j数据库入门教程 - NoSQL教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用