webpack打包之初体验

webpack文章/教程1个月前发布勤奋小助

0 0

–>

我使用的编译器是webStrom，在此我就不讲webpack的什么有点用处什么的了

首先还是小伙伴们看一下我的文件目录吧，免得建文件的过程蒙蔽

webpack打包之初体验

首先我们建一个文件夹src

在src文件夹下建三个js模块文件，分别为a.js , b.js ,c.js

js文件内容分别为，

export default function a(){
    console.log('modeule a')
}

export default function b(){
    console.log('modeule b')
}

export default function c(){
    console.log('modeule c')
}

// export default 提供对外接口

再建一个app.js文件，用于访问a b c 三个文件，内容如下

//import：导入有能供对外接口的文件，在当前进行运用。定义规则：import (常量 | 函数 | 文件 | 模块) from 文件路径

import a from  './a';
import b from  './b';
import c from  './c';

a();
b();
c()

 若此时我们建一个index.html通过script加载app.js文件，浏览器会报错

webpack打包之初体验

因为目前浏览器还不支持模块化，所以……我们就需要webpack工具啦，

webpack的安装

我用的是webstorm

在命令行输入:npm init -y 初始化一下，会得到一个文件package.json

{
  "name": "",
  "version": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",                           
  },
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

文件的内容如果没有

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",                           
  },

你也可以手动加上，后面要用

安装：nmp i -D webpack
完成后就会有一个文件夹node_modules，不动它，还有一个package-lock.json文件

打包辣

首先我们要建一个配置文件，webpack.config.js,文件内容

const path = require('path');
module.exports = {
    entry: './src/app.js',      //入口，调用依赖的文件路径
    output: {
        path: path.resolve(__dirname, 'dist'),   // 文件地址
        filename: 'apc.js'                   //文件名 （自定义）
    }
};

module.exports导出一个对象，我们打包后的文件里面会有很多列关于webpack的配置信息，有的小伙伴就问为什么不用es6的export 因为我们是基于nodeJs来运行的，所以。。。。


entry：就是刚才那个导入模块的文件路径

output：输出

        path：我们要把打包后的文件放的路径，所以我们需要建一个文件夹，名为dist

        filename:打包后的js文件名

真的要开始了

记得刚才的那个package.json文件么，在“scripts”里加一条“dev” :”webpack”,为webpack添加一条命令，这样我们可以通过命令来运行，默认为“webpack” 运行指向

webpack.config.js 配置文件

{
  "name": "",
  "version": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack"       //默认访问webpack.config.js文件，若要自定义文件，则用 "dev": "webpack --config 自定义的文件名.js"
                             //运行命令 npm run dev 就完成了打包
  },
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}


然后在命令行输入：npm run dev 
此时在dist文件夹下就多了一个apc.js文件

此时我们在dist文件夹下再建一个html文件，引入apc.js文件就可以得到
modeule a  
modeule b 
modeule c