一直在用fis3，也能完美满足目前业务需求。我厂的scrat也有大量的feature贴合业务线。

最近在看React，要打通React的技术栈，学习Webpack是必不可少的了。

从npm上安装很简单：

npm install webpack -g

Webpack特色：

1. 模块化，支持异步和同步1. Loader，把各种文件拆分成模块的支持1. 更机智的编译1. 插件系统，提供各色各样的插件，毫不逊色的其他打包工具，要什么价什么

简单demo

先上第一个demo：

cats.js

var cats = ['dave', 'henry', 'martha'];module.exports = cats;

app.js

var cats = require('./cats');console.log('cats')

webpack登场：

webpack ./app.js app.bundle.js

这命令可以cats.js打包进app.js里面,最后生成app.bundle.js

利用配置文件来操作webpack

-webpack.config.js

module.exports = {    entry: './src/app',    output: {        path: './bin',        filename: 'app.bundle'    }}

配置完后，在文件夹直接webpack即可

使用loader

loader应该是webpack的预加载工具

module.exports = {    entry: './src/app.js',    output: {        path: './bin',        filename: 'app.bundle.js'    },    module: {        loaders: [{            test: /\.js$/,            exclude: /node_moudles/,            loader: 'babel-loader'        }]    }}

使用plugins

module.exports = {    entry: './src/app.js',    output: {        path: './bin',        filename: 'app.bundle.js'    },    module: {        loaders: [{            test: /\.js$/,            exclude: /node_moudles/,            loader: 'babel-loader'        }]    },    plugins: [        new webapck.optimize.UglifyJsPlugin({            compress: {                warnings: false            },            output: {                comments: false            }        })    ]}

CONFIGURATION OBJECT CONTENT

可以编写js，不仅仅是个json对象

entry

基本语法：{    context: _dirname + '/app',    entry: './entry',    output: {        path: _dirname + '/dist',        filename: 'bundle.js'    }}传入object时{    entry: {        page1: './page1',        page2: ['./entry1', './entry2']    },    output: {        filename: '[name].bundle.js',        chunkFilename: '[id].bundle.js'    }}

output

multiple entries{    entry: {        app: './src/app.js',        search: './src/search.js'                },    output: {        filename: '[name].js',        path: __dirname + '/built'                }}//outpu: ./built/app.js  ./built/search.js

output.pubicPath

适用于类似CDN匹配需求可添加hash绕过缓存机制output: {    path: '/home/project/cdn/assets/[hash]',    publicPath: "http://cdn.example.com/assets/[hash]/"}

Watch

webpack有个很牛逼的地方，热刷新。

配置好文件后，下面命令可以监听文件变化

webpack --watch 

在配置文件里一样可以实现：

module.exports = {    entry: {        app: './src/app.js'    },    output: {        filename: 'bundle.js',    },    watch: true}

在做网页开发时候，需要用到服务器，webpack提供了webpack-dev-server

安装很简单:

npm install webpack-dev-server -g

demo:

webpack-dev-server --host 0.0.0.0 --port 8080 --inline

关键字：JavaScript, webpack

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！