Webpack傻瓜式指南（未完待续）

最新推荐文章于 2024-03-19 15:17:43 发布

haliofwu

最新推荐文章于 2024-03-19 15:17:43 发布

阅读量1.2k

点赞数

分类专栏： web 前段杂

web 前段杂专栏收录该内容

37 篇文章 0 订阅

订阅专栏

一直很想写一个vue+webpack的小项目练手。不过github上的项目下载下来都看不懂。看了好多篇关于webpack的，对于我这种零基础（只有html,css,js，vue基础），我根本不懂得如何入手。

于是从官网入手，终于开始慢慢知道这货是什么用的了。

（1）用webpack实现 hello world.

.安装：

新建文件夹，比如：web-pack-demo;

cd web-pack-demo;

npm init; //packjson 用来记录依赖会发现web-pack-demo文件夹多了 node_modules这个文件夹。node 的模块都在里面，之后安装的webpack也会在这里。

npm install webpack --save-dev //安装webpack,并保存在package.json里;

.使用：

test1:

新建文档index.js(主文件夹，里面只引入webpack 打包后的结果 budle.js)，内容如下：

<!-- index.html -->
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

文档entry.js:

document.write('Hello world.')

然后编译 entry.js 并打包到 bundle.js：

$ webpack entry.js bundle.js

打包过程显示的日志忽略不表。

结果：用浏览器打开index.html 可以看到：

Hello world

test 2: 在上面的基础上添加模块 moudle.js，内容如下：

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

修改entry.js ：

document.write('It works.')
document.write(require('./module.js')) // 添加模块

重新打包：

webpack entry.js bundle.js

刷新浏览器页面，可以看到：

It works.It works from module.js.

.Loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

这句话的意思就是，其他不是js的文件全部用一个loader来转换。这里的loader 命名暂时先不管。

举例子：

test 1:

在上面的代码里新建一个文档：style.css

body { background: yellow; }

修改 entry.js:

require("!style!css!./style.css") // 载入 style.css
document.write('It works.')
document.write(require('./module.js'))

在这里直接刷新页面，是没有用的。

需要使用 webpack的loader.

npm install css-loader style-loader

然后：

webpack entry.js bundle.js

刷新界面，可以看到效果。

但是每次都webpack entry.js bundle.js 而且

require("!style!css!./style.css")

还很麻烦。因此，我们可以通过一个文件来简化：

新建一个文件夹：webpack.config.js

var webpack = require('webpack')

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {test: /\.css$/, loader: 'style!css'}
    ]
  }
}

entry.js 修改：

require('./style.css')

现在直接用 webpack 就可以打包了。

刷新界面看结果。

补充webpack的知识点在下面：

原文链接：http://www.jianshu.com/p/271f93b8c051

先贴一下webpack的配置文件把，下面就从webpack的每个配置项一步一步聊聊webpack是怎样工作的，这样做会有什么好处，或者又会有些什么坑。

{
    resolve: {
        alias: {
            "jquery": path.resolve(
                __dirname,
                "assets/bower_components/jquery/dist/jquery"
            ),
            "jquery_plugin": path.resolve(
                __dirname,
                'assets/javascripts/jquery_plugin'
            )
        }
    },
    entry: {
        index: ['./assets/javascripts/index.js'],
        edit: ['./assets/javascripts/edit.js']
    },
    output: {
        path: './build/public',
        publicPath: '/',
        filename: '/javascripts/[name].js'
    },
    module: {
        loaders: [
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract('style-loader',  "css-loader!less-loader")
                //loader: ( "style-loader!css-loader!less-loader")
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract('',  "css-loader")
            },
            {
                test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
                loader: "file?name=images/[name].[ext]"
            },
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components|ace)/,
                loader: 'babel',
                query: {
                    optional: ['runtime']
                }
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("commons", "javascripts/commons.js"),
        new ExtractTextPlugin( "/stylesheets/[name].css" ,  {
            allChunks: true
        }),
        new webpack.ProvidePlugin({
            "jQuery": path.resolve(
                __dirname,
                "assets/bower_components/jquery/dist/jquery"
            ),
            "$": path.resolve(
                __dirname,
                "assets/bower_components/jquery/dist/jquery"
            )
        }),
        new webpack.optimize.UglifyJsPlugin({
            mangle: {
                except: ['$','jQuery']
            },
            compress: {
                warnings: false
            }
        })
    ]
}

在介绍各个配置项之前，先介绍一下webpack是怎样对各个模块进行管理的。webpack可以使用cmd的范式，通过 require 引入各个模块:

var $ = require('./jQuery.js');

当然，除了引入js模块以外，我们还可以引入css文件或者less等预编译文件，至于问什么需要这样做，我后面会详细介绍一下的。

require('./index1.less');
require('./index2.css')

而各个模块的定义可以使用AMD或者CMD的设计规范来定义各个模块，因而，我们可以很轻松的像node.js那样使用 module.exports 来定义我们编写的模块

var obj = {};
module.exports = obj;

resolve

alias

{
    resolve: {
        alias: {
            "jquery": path.resolve(
                __dirname,
                "assets/bower_components/jquery/dist/jquery"
            ),
            "jquery_plugin": path.resolve(
                __dirname,
                'assets/javascripts/jquery_plugin'
            )
        }
    }
}

webpack的alias的作用，通过key，value的形式，将模块名和路径对应起来，不管是相对路径还是绝对路径，因此，在模块引用的时候，利用require引用的模块可以不用通过相对路径或者绝对路径的方式，而是直接通过require('模块名')的方式进行引用。

entry

入口文件，通过key，value的方式，确定入口文件的文件名及其对应的文件路径。

什么是入口文件呢？在webpack中，所有的js文件都可以通过一个js文件进行引用，如下面的例子那样：

/**
* index.js
*/
require('moduleA');
require('../moduleB');
require('../index.less');

var $ = require('jquery');

/**
* webpack.config.js
*/
{
    entry: {
        indexA: ['./path/to/index.js']
    }
}

webpack打包的时候，webpack会根据 webpack.config.js 中的entry字段，对index.js文件中所有通过require引入的js文件打包成indexA.js和common.js文件，至于common.js文件是怎样生成的，需要做些什么配置，后文会有所介绍。

output

path

path: './build/public',

webpack打包后，生成的js文件，css文件，字符文件，图片文件会打包放在path字段所指定的文件目录中。

publicPath

publicPath: '/buildPath/'

css文件中，我们通常都会引入图片或者字符文件，而webpack打包过程中，其引用的文件可通过file-loader(loader部分会介绍)进行打包，并对其文件名进行处理。

而在node引用中，我们可以搭建静态文件服务器，对某一文件夹（如express默认的public）中的静态资源进行管理，浏览器可以通过 /images/image-name.jpg直接访问。

而webpack打包的时候，遇到通过相对路径或者绝对路径进行引用的文件，其路径可通过publicPath中指定的路径重新合成。

如在css文件中有以下文件路径

div{
    background-image: url(../images/picA.jpg);
}

而在webpack.config.js中，有以下配置

{

    output: {
        path: './build/public',
        publicPath: '/buildPath/'
    },
    module: {
        loaders: [
            {
                   test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
                loader: ExtractTextPlugin.extract('',  "file-loader")
            }
        ]
    }  
}

而webpack生成的css文件如下

div{
    background-image: url(/buildPath/picA.jpg);
}

filename

entry: {
    indexA: ['./assets/javascripts/index.js']
},
output: {
    path: './build/public',
    publicPath: '/',
    filename: '/javascripts/[name].js'
}

确定webpack生成的js文件的准确路径和文件名，其文件路径根据之前的path和filename进行合成，文件为entry中的指定的index.js文件的模块名，如上面配置项所示，index.js文件生成的路径为 build/public/javascripts/indexA.js

module

loaders

module: {
    loaders: [
        {
            test: /\.less$/,
            loader: ExtractTextPlugin.extract('style-loader',  "css-loader!less-loader")
            //loader: ( "style-loader!css-loader!less-loader")
        }
        {
            test: /\.css$/,
            loader: ExtractTextPlugin.extract('',  "css-loader")
        },
        {
            test: /\.(png|jpe?g|eot|svg|ttf|woff2?)$/,
            loader: "file?name=images/[name].[ext]"
        },
        {
            test: /\.jsx?$/,
            exclude: /(node_modules|bower_components|ace)/,
            loader: 'babel',
            query: {
                optional: ['runtime']
            }
        }
    ]
},

在webpack中，loader是webpack中最为重要的组成，loader可以对不同的文件使用不同的loader进行处理，且模块可以链式使用。

loader的作用是什么呢？我们在前端开发中，我们可能以不在直接使用css进行开发而使用Sass、Less这种预编译器进行处理，js我们可能使用coffee进行编写，甚至使用ES6进行开发，因此，我们需要对我们所编写的less文件，coffee文件或者使用了ES6语法的js文件进行编译或者转义，而loader的作用就是如此。

什么文件我们需要进行转义了，在loader字段中，我们可以在test字段中通过正则表达式选择我们需要转义的文件。

loader可以链式调用，对于less文件，我们可以通过less-loader对less文件转义成css文件，然后再使用css-loader对其生成的css文件在进行进一步的处理。

plugins

plugins是webpack中和loader同等地位的组成部分，他可以对我们生成的文件或者我们需要怎样生成文件进行跟细致化的处理。

new webpack.optimize.CommonsChunkPlugin("commons", "javascripts/commons.js")

该插件可以对entry中入口文件中的共同部分进行分离，达到在不同页面中可以共用同一套commons.js，利用缓存减少文件从服务器中获取。

new ExtractTextPlugin( "/stylesheets/[name].css" ,  {
    allChunks: true
})

在output字段中，我们可以通过filename字段所定义的文件路径和文件名来确定我们所生成的js文件路径和文件名。

而对于css部分，我们可以通过上述插件对css部分进行类似于上面js部分的处理。

new webpack.ProvidePlugin({
    "jQuery": path.resolve(
        __dirname,
        "assets/bower_components/jquery/dist/jquery"
    ),
    "$": path.resolve(
        __dirname,
        "assets/bower_components/jquery/dist/jquery"
     )
})

在webpack中，对于模块的引入，我们可以使用require的方式进行引入，也可以通过该插件全局引入好像jQuery和$这样的模块名，而不用在文件内部使用require进行引入。

文／杨某某是也（简书作者）

著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。

haliofwu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack傻瓜式指南（未完待续）

首发于前端外刊评论已关注写文章Webpack傻瓜式指南（一）张轩 · 6 个月前Webpack最近很热，我一开始是想翻译一篇国外关于webpack的佳作，但是找来找去也没有一篇让我感觉到很满意的，好多都是一步到位，满屏幕都是React＋Webpack，官方文档写的不太好，好多点都没有解释
复制链接

扫一扫