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值
    }
};