webpack入门

一、安装webpack
首先第一步是要安装node哦，没有的小伙伴先去官网 https://nodejs.org/en/ 下载，安装之后在命令行输入node -v 出现node的版本号，就说明你安装成功咯。接下来我们进入正题，安装webpack

npm init
npm install webpack --save-dev 

–save-dev 是将webpack 保存进package.json中

安装好后之后会出现以下目录

二、打包

创建一个 a.js 文件
webpack a.js a.bundle.js

a.bundle.js 就是打包之后的文件

1、动态打包： 代码修改之后，保存后自动打包

webpack a.js a.bundle.js  --watch

2、 查看打包过程

webpack a.js a.bundle.js --progress

3、看打包的模块

webpack a.js a.bundle.js --progress --display-modules

4、 看打包的原因

webpack a.js a.bundle.js --display-reasons

三、 如果要引用css文件， 要安装style-loader 和 css-loader

npm install css-loader style-loader --save-dev

使用方法：

1、在入口文件中使用

require('style-loader!css-loader!./style.css') //style.css是样式文件

2、在打包时添加

webpack a.js a.bundle.js --module-bind 'css=style-loader!css-loader'

四、webpack配置文件

初始项目的目录

1.基础打包

• 首先要在你的项目中新建一个webpack.config.js的配置文件，写入一下代码

module.exports = {
    entry: './app.js', // 入口文件的路径
    output: {
        path: __dirname + '/dist/js', // 文件打包的位置
        filename: 'entry.bundle.js' // 打包后文件的名字
    }
}

• 编写好webpack.config.js 之后， 运行一下代码即可打包

webpack

• 如果你创建的文件不叫webpack.config.js 叫做webpack.dev.js， 通过以下代码去打包文件

webpack --config webpack.dev.js

---

打包后的文件目录为

-想要添加一些参数，可以使用npm脚本，加到package.json中，通过npm run webpack 来打包

"webpack": "webpack --config webpack.config.js --progress"

2、打包多个文件

module.exports = {
    entry: {
        'app': './app.js',
        'app2': './app2.js',
    }, 
    output: {
        path: __dirname + '/dist/js',
        filename: '[name].bundle.js' // name是entry对象里面的key值
    }
};