webpack官网笔记

webpack,the flexible module bundler,灵活的模块打包工具

安装 (Installation)

node.js

如果系统未安装node.js，先安装 node.js

命令行方式使用webpack

全局安装（最佳实践不采用这种方式，采用项目中使用方式）

npm i webpack -g

项目配置使用webpack

1. 输入以下命令在根目录增加 package.json

npm init

2. 安装webpack

npm i webpack -D

3. 安装开发工具（可选 ）

npm i webpack-dev-server -D

使用（Usage）

命令行方式

1. 建立 cats.js

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

2. 建立入口文件 app.js

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

3. 命令行打包

webpack ./app.js app.bundle.js

4. 任务完成，可以运行打包出来的文件

node app.bundle.js
["dave","henry","martha"]

配置文件方式

1. 项目结构

   
   
   1.png
2. 安装webpack依赖

npm i -D webpack

3. 根目录创建 webpack.config.js webpack配置文件并配置

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

4. 输入命令

webpack

5. 任务完成，可以运行打包出来的文件

node app.bundle.js
["dave","henry","martha"]

使用loaders

webpack通过使用loaders将非js资源转成webpack可以使用的静态资源，有各种不同功能的 loaders, 这里通过 babel-loader 举个例子

1. 安装依赖

npm i -D babel-core babel-preset-es2015 babel-loader

2. 根目录下创建文件 .babelrc 并配置

{"presets":["es2015"]}

3. 配置 webpack.config.js

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

4. 安装项目要使用的依赖

npm i -S jquery babel-polyfill

5. 编辑 src/app.js

    import 'babel-polyfill';
    import cats from './cats';
    import $ from 'jquery';

    $('<h1>Cats</h1>').appendTo('body');
    const ul = $('<ul></ul>').appendTo('body');
    for (const cat of cats) {
        $('<li></li>').text(cat).appendTo(ul);
    }

6. 输入命令

    webpack

7. 完成，请享用

使用plugins

举个例子，这里用 uglify plugin

const webpack = require('webpack');

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

使用loaders (Using loaders)

使用plugins (Using plugins)

*转载请注明出处