Webpack

2024年5月23日 175次阅读 来源: alogy

简介

WebPack是一款加载器兼容打包东西。
可以处置惩罚种种资本：JS(JSX),coffee，less/sass，图片等。
静态资本打包东西
精彩的前端自动化构件化东西，模块化东西，资本管理东西
兼容多种JavaScript誊写范例，具有更壮大的JavaScript模块化功用

特性

  • 运用commonJs的情势誊写剧本。也对AMD，CMD的写法支撑。
  • 一切的静态资本都可以是模块援用，而不仅仅是JavaScript文件了。
  • 便利开辟，可以替代部份的grunt/gulp的事变。
  • 扩大性强，插件机制完美。
  • 仅须要对应的加载器即可支撑，设置简朴，关注文件依靠关联

事变道理：
把项目看成一个团体，经由历程一个给定的主文件(如：app.js)，webpack将从这个文件最先找到项目中的一切依靠文件，经由历程loaders处置惩罚它们，打包为一个浏览器可以辨认的JavaScript文件。

webpack 中心观点

entry：一个可实行模块或库的进口文件。
chunk：多个文件构成的一个代码开，比方把一个可实行模块和它一切依靠的模块组合和一个chunk。
loader：文件转换器。
plugin：插件，用于扩大webpack的功用，在webpack构建生命周期的节点上到场扩大hook为webpack到场功用。

webpack构建流程

从启动webpack构建到输入效果阅历了一系列历程：

  • 剖析webpack设置参数，合并从shell传入webpack.config.js文件里设置的参数，临盆末了的设置效果
  • 注册一切设置的插件，好让插件监听webpack构建生命周期的事宜节点，以做出对应的回响反映
  • 从设置的entry文件进口最先剖析文件构建AST语法树，找出每一个文件所依靠的文件，递归下去。
  • 在剖析文件递归的历程当中依据文件范例和loader设置找出适宜的loader用来对文件举行转换
  • 递归完后获得每一个文件的末了总效果，依据entry设置天生代码块chunk
  • 输出一切chunk到文件体系

注重，在构建生命周期中有一系列插件在适宜的机遇做了适宜的事变，比方UglifyJsPlugin会在loader转换递归完后对效果再运用UglifyJs紧缩掩盖之前的效果。

webpack设置文件

webpack.config.js

设置申明：

  • plugins 插件项
  • entry 页面进口文件
  • output 对应输进项(即进口文件终究天生位置，名字)
  • modules.loaders 设置每一个种资本文件须要运用什么加载器来处置惩罚(多个loader之间运用”!” 衔接)

基本敕令

webpack 启动webpack的要领
webpack -p 宣布环境编译(紧缩代码)，对打包后的文件举行紧缩
webpack -w 供应watch要领，及时举行举行打包更新
webpack -d 供应source map,轻易调试
webpack --config xx.js 以某个config作为打包，运用别的一份设置文件来打包(比方：webpack.config2.js)
webpack --help 更多的敕令

运用&设置

Node API 运用：

var webpack = require('webpack');

默许运用当前目次的webpack.config.js 作为设置文件。可以依据差别的需求设置差别的config

极简webpack设置文件

moudle.exports = {
    entry: [
        './app/main.js'
    ],
    output: {
        path: __dirname + '/dist/',
        publicPath: '/dist/',
        filename: 'bundle.js'
    }
}

个中entry参数定义了打包后的进口文件，数组中的一切文件会打包天生一个filename文件
output参数定义了输出文件的位置

在 package.json 文件中设置


"scripts": {
    "dev": "webpack",
    "deploy": "webpack --config webpack.deploy.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

可以运用 npm run dev 和 npm run deploy 指令.
须要在package.json 文件地点目次指令有效

庞杂的设置

大众文件提取

运用了一个 CommonsChunkPlugin 的插件，它用于提取多个进口文件的大众剧本部份，然后天生一个common.js 来轻易多页面之间举行复用

var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
module.exports = {
    entry: {a: './a', b: './b'},
    output: { filename: '[name].js' },
    plugins: [ new CommonsChunkPlugin('common.js') ]
}


<script src="common.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>

有效的设置项

module.noParse 假如肯定一个模块中没有别的依靠的，就可以设置这项，webpack将不再扫描这个文件中的依靠

module: {
    loaders: [{ test: /\.css$/, loader: 'style-loader'}],
    noParse: [/moment-with-locales/]
}

resolve.alias 别号.是Webpack 的一个设置项，它的作用是把用户的一个要求重定向到另一个途径 （明白成 302）

resolve: {
    extensions: ['.js', '.less', '.css'],
    alias: {
        moment: "moment/min/moment-with-locales.min.js"
    }
}

加载器

对应种种差别的资本，须要有各自的loader

模块： 静态的文件， 比方： JavaScript，CSS， LESS， TypeScript
JSX，CoffeeScript，图片等等

文件设置： 经由历程正则表达式对文件名举行婚配.

关于差别的模块有其对应的模块加载器，它们可以举行串连

module: {
    loaders: [{
        test: /\.less$/,
        loader: 'style=loader!css-loader!less-loader'
    }, {
        test: /\.(png!jpe?g)$/,
        loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

require() 还支撑在资本path前面指定loader，即 require(![loaderslist]![source path]) 情势

require("style!css!less!./mystyles.less");

差别范例的模块加载完成 ( AMD、CommonJS、ES6 )

CommonJS 的rqeuire函数则是同步加载 — 运用require.ensure完成兼容
AMD是模块异步加载并保证实行递次 — 运用require完成兼容
ES6中运用import完成模块的引入 — 运用Babel完成兼容

在Webpack中引荐CommonJS要领去加载模块，这类体式格局语法越发简约直观.

webpack 内部完成敕令差别

require.ensure(CommonJs); // 保证CommonJs递次

require.ensure(['module-a', 'module-b'], function ( require ) {
    var a = require('module-a');    
    var b = require('module-b');
    // ...
});

require(AMD);

require(['module-a', 'module-b'], function ( a, b ) {
    // ...
});

require.include(request);

require.ensure([], function( require ) {
    require.include('./file');
    require('./file2');
});

sourcemap

可以把开辟文件在浏览器中显现，便于调试

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map'
}

webpack-dev-server

天生一个开辟运用的效劳器，在文件有变化的时刻，自动打包。有文件的热替代的功用

webpack-dev-server --inline --hot // 文件自动打包， 模块热替代

react 项目基本搭建

须要的东西

npm install babel-core babel-preset-es2015 babel-parset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

npm install react react-dom --save-dev

零丁运用babel，须要装置的东西

npm install babel-loader babel-core babel-preset-es2015 --save-dev

模块的援用

运用 require 体式格局直接援用静态文件
CSS 被转化为style标签

require('./myapp.less');

var myapp = require('./myapp.js');

console.log(myapp);

图片打包

运用rquire体式格局直接援用静态文件
url-loader可以协助完成图片的封装打包，也可以经由历程require完成
图片能够被转化成 base64花样的dataUrl


div.img {
    background: url('../img/xxx.jpg');
}

// 或许
var img = document.createElement('img');
img.src = require('../image/xxx.jpg');
document.body.appendChild(img);

CSS文件自力打包

一般并不想把款式打在剧本中，最好自力天生CSS文件，在页面中外链才好，这时候可以运用插件extract-text-webpack-plugin –save-dev

npm install extract-text-webpack-plugin --save-dev    

plugins: [
    new ExtractTextPlugin('styles.css')
]

webapck-dev-server

webpack-dev-server 开辟效劳器

应用Express开辟静态，常常革新.

基于Node Express框架的轻量级开辟效劳器
静态资本Web效劳器
开辟中会监听文件的变化及时打包关于简朴静态页面或许仅仅依靠于自力效劳的前端页面，都可以直接运用这个开辟效劳器举行开辟

Webpack开辟效劳器须要零丁装置

npm install -g webpack-dev-server

启动敕令

webpack-dev-server --content-base build/ --hot

插件

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


new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
    template: 'app/custom.html',
    filename: 'custom.html',
    chunks: ['mobile'],
    inject: 'body'    
})

config

module.exports = {
    devtool: "source-map",    
    entry: getEntry(),         //猎取项目进口js文件
    output: {
        path: path.join(__dirname, "dist/js/"), //文件输出目次
        publicPath: "dist/js/",        //用于设置文件宣布途径，如CDN或当地效劳器
        filename: "[name].js",        //依据进口文件输出的对应多个文件名
    },
    module: {
        //种种加载器
        loaders: [{
                    test: /\.css/,
                    loader: 'style!css'
                }, {
                    test: /\.(png!jpe?g)$/,
                    loader: 'url-loader?limit=10240&name=build/[name].[ext]'
                }, {
                    test: /\.jsx?$/,
                    loader: 'babel-loader'
                }]
    },
    resolve: {
        //设置别号，在项目中可缩减援用途径
        alias: {
            jquery: srcDir + "/js/lib/jquery.min.js",
            core: srcDir + "/js/core",
            ui: srcDir + "/js/ui"
        }
    },
    plugins: [
        //供应全局的变量，在模块中运用无需用require引入
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            // nie: "nie"
        }),
        //将大众代码抽离出来合并为一个文件
        new CommonsChunkPlugin('common.js'),
        //js文件的紧缩
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};
    原文作者：alogy
    原文地址: https://segmentfault.com/a/1190000006666779
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞