1、webpcak 起步 - 京鸿一瞥

安装，一般本地安装

（不是所有的项目都用得着webpack）

(-save生产环境 --save-dev开发环境)

（webpack v4+版本还需要安装cli，才能使用 webpack 命令行）

npm install webpack webpack-cli --save-dev

局部的安装会发现直接运行 webpack 命令失效

所以，在 package.json 中配置

使用的时候调用 npm run show

ES2015 中的 import 和 export 语句已经被标准化。虽然大多数浏览器还无法支持它们，但是 webpack 却能够提供开箱即用般的支持。

注意，webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性，请确保你在 webpack 的 loader 系统中使用了一个像是 Babel 或 Bublé 的转译器。

基本的构建过程

webpack 对 CommonJS 、 AMD 、ES6的语法做了兼容，总的规则是CMD，可谓集CommonJS、AMD、ES6等多种特性于一身，灵活、易用、高扩展性、性能优越。

配置

节点	说明
entry	指定要打包的文件
resolve	配置寻找模块的规则
module	配置处理模块的规则，项目里面的一切都是模块，一个文件就是一个模块
loader	各种加载器，用于代码转换
plugin	配置扩展插件，各种各样的插件，这也是其灵活性特色的一大体现
output	打包后文件的输出目录

构建目录结构

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

npm install --save lodash

index.js

import _ from 'lodash';

function component(){
    var element = document.createElement('div');
    //lodash
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component())

index.html

<body>
    <script src="./dist/bundle.js"></script>
</body>

webpack.config.js

//引用 Node.js 中的 path 模块，处理文件路径的小工具
const path = require("path");

//1、导出一个 webpack 具有特殊属性的对象
module.exports = {
    //指定模式配置，取值: none(什么也没有)，development or production(默认的)
    //如，production 模式打包后 bundel.js 是压缩版本的， development 则不是压缩的
    mode: 'none',
    //入口
    entry:'./src/main.js',
    //出口文件
    output: {
        //path 必须是一个绝对路径， __dirname 是当前js的绝对路径
        //E:\\Vue project\webpack_demo
     path:path.join(__dirname,'./dist/'),//打包结果的文件目录
     filename: 'bundle.js' //打包的结果文件名   
    }

}

如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明，可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置是非常有用。

posted on 2020-11-25 12:11 京鸿一瞥阅读(148) 评论(0) 收藏举报

刷新页面返回顶部