安装

1、先使用npm init初始化一个web项目

2、根据需要安装webpack(安装到本项目)

安装最新的稳定版：npm i -D webpack
安装指定版本：npm i -D webpack@version
安装最新的体验版：npm i -D webpack@beta

3、运行：

通过命令行node-modules/.bin/webpack中的可执行文件
npmscript定义的任务会优先使用本项目下的webpack

"script": {
    "start": "webpack --config webpack.config.js"
}

使用

1、页面入口文件引入webpack输出的javascript文件（如下的bundle.js）

2、webpack执行构建时默认从项目根目录下的webpack.config.js中读取

const path = 'path';
module.export = {
    // javascript执行的入口文件
    entry: './main.js',
    output: {
        // 将所有以来的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出文件放到dist目录下
        path: path.resolve(_dirname, './dist'),
    }
}

执行顺序

webpack执行构建时，从main.js出发，识别源码中的模块化导入语句，递归找出入口文件所有的依赖，将入口和其所有以来单独打包到一个文件中。

使用loader

为什么使用loader

webpack不原生支持解析css文件，如果想要支持非js文件需要引入webpack的loader机制

配置修改

const path = 'path';
module.export = {
    // javascript执行的入口文件
    entry: './main.js',
    output: {
        // 将所有以来的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出文件放到dist目录下
        path: path.resolve(_dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 使用正则表达式匹配需要用改loader转换的css文件
                test: /\.css$/,
                use: ['style-loader','css-loader?minimize'],
            }
        ]
    }
}

注意

1、loader的执行顺序，从后到前

2、use的属性值是使用到的loader名称组成的数组

3、每个loader都可以通过url querystring方式传入参数，如上的css-loader?minimize；还可以通过object实现，以上的use: ['style-loader','css-loader?minimize']等价于

use: [
    'style-loader',
    {
        loader: 'css-loader',
        options: {
            minimize: true,
        }
    }
]

使用plugin

用于扩展webpack功能例如：通过plugin将注入bundle.js文件里css提取到单独的文件里

const path = 'path';
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.export = {
    // javascript执行的入口文件
    entry: './main.js',
    output: {
        // 将所有以来的模块合并输出到一个bundle.js文件
        filename: 'bundle.js',
        // 将输出文件放到dist目录下
        path: path.resolve(_dirname, './dist'),
    },
    module: {
        rules: [
            {
                // 使用正则表达式匹配需要用改loader转换的css文件
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    // 转换.css需要使用的Loader
                    use: ['css-loader'],
                    
                }),
            }
        ]
    },
    plugin: [
        new ExtractTextPlugin({
            // 从bundle.js文件里面提取出来的文件名称
            filename: `[name]_[contenthash:8].scc`,
        })
    ]
}

使用DevServer

前提了解：开发中可能需要：

1、提供http服务而不是使用本地问价预览

2、监听文件变化并自动刷新网页，做到实时预览

3、支持Source Map，方便调试

其中webpack支持第二三点需求，第一点就可以使用官方提供的开发工具DevServer做到

DevServer工作流程

DevServer会启动一个Http服务器用于网页请求，同会时帮助启动webpack，并接受webpack发出的文件变更信号，通过WebSocket协议自动刷新网页做到实时预览。

实时预览注意事项

webpack在启动时会以配置里的entry为入口取递归解析出entry所依赖的文件，只有entry和本身依赖的文件才会被webpack添加到监听列表里，脱离js模块化系统的webpack不知道它的存在

支持Source Map

在启动时带上--devtool source-map参数，重启DevServer

总结

entry：入口
module：模块
chunk：代码块
Loader：模块转换器
Plugin：扩展插件
output：输出结果

Webpack安装与基本使用-02

安装

使用