webpack-工程化工具

最新推荐文章于 2024-03-27 16:47:14 发布

weixin_30239339

最新推荐文章于 2024-03-27 16:47:14 发布

阅读量164

点赞数

CC 4.0 BY-SA版权

文章标签： webpack javascript ViewUI

原文链接：http://www.cnblogs.com/tiaotuo/p/9239652.html

本文介绍 Facebook 发布的 Webpack 工程化工具，它支持 CommonJS 规范，能够实现一切资源的模块化打包加载。文章详细展示了 Webpack 的安装方法、配置文件示例，并介绍了其核心理念与特性。

一.简介

1.webpack 是 facebook 公司发布的一款工程化工具,早期有 react 使用.

2.核心理念: 一切都是资源,是资源我们就能模块化打包加载.

3.webpack 默认支持 commonjs 规范 ( 也支持 amd, cmd 规范不建议使用 ) ,所以我们可以像开发 node 一样开发.

4.特点: 模块化开发, 打包加载.

5.安装 npm install -g webpack , npm install -g webpack-dev-server ( 必须要先安装 node.js 和 npm )

6.配置文件 ( webpack.config.js) : 必须要有

module.exports = {
    resolve: {
        // 更改引入的模块文件地址
        alias: {
            vue$: 'vue/dist/vue.js'
        }
    },
    entry: {
        '03' : './es/03.es',
        '04' : './es/04.es',
        '05' : './es/05.es',
        '06' : './es/06.es',
        '07' : './es/07.es',
        '08' : './es/08.es',        
        '09' : './es/09.es',
        '10' : './es/10.es',
        '11' : './es/11.es',
        '12' : './es/12.es',
        '13' : './es/13.es'
    },
    output: {
        filename: './pack/[name].js'
    },
    module: {
        rules: [
            {
                test: /\.es$/,
                loader: 'babel-loader?presets[]=es2015'
            }
        ]
    }
}