webpack -- 完整入門學習筆記（一）

1、建立項目

經過命令mkdir projectName和touch fileName建立項目和生成文件
安裝

mkdir webpackDemo

切換

cd webpackDemo

2、初始化NPM

這一步是初始化npm，生成一個本地的json依賴文件，運行命令後，可以在webpackDemo下面看見一個package.json文件

npm init -y

3、安裝webpack

webpack 4.x如下的版本直接安裝webpack，若是是webpack 4.x以上版本，由於4.x版本以上將webpack-cli分離出來了，因此還須要安裝webpack-cli
安裝

npm install webpack webpack-cli --save-dev

按照官網的意思，是不推薦全局安裝的，建議本地安裝，若是要全局安裝也能夠

npm install webpack webpack-cli -g

安裝完成以後，咱們會發現webpackDemo下面多個一個node_module和package-lock.json，其中package-lock.json是npm 5版本纔有的

4、調整webpack.json

按照官方的說法執行這一步是爲了確保咱們的安裝包是私有的，因此須要去掉main入口，新增一個private

5、運行項目

如今初始的配置基本完成，如今在項目根目錄下建立一個index.js文件，在裏面輸入一些東西，而後運行打包文件運行，注意運行webpack命令咱們會發現webpack不是內部命令
index.js

webpack命令

因此按照官方的命令來，Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，會將咱們的腳本 src/index.js 做爲 入口起點，也會生成 dist/main.js 做爲 輸出
npx webpack

咱們發現運行報錯了，可是即便咱們不建立src文件，也依舊能夠運行，只不過咱們直接運行的是目標文件
npx webapck index.js

這一次運行成功，咱們發現生成了dist文件，下面有一個main.js文件，咱們看一下這個js文件

咱們發現咱們index.js的內容被打包到這個main.js裏面了，至於壓縮問題，這個根據官方說明，只要是使用webpack，就會自動壓縮

6、正常配置

雖然上面運行了，可是仍是按照官方要求，新建一個src文件，將index.js文件放入進去
建立

mkdir src

7、webpack配置文件

到這一步，咱們建立一個webpack的配置文件：webapck.config.js，在文件的根目錄，配置文件的基本內容大體以下：

8、運行配置文件

如今咱們能夠經過運行配置文件來生成dist

npx webpack --config webpack.config.js

運行成功

9、配置npm scripts

每次運行項目，都輸入這麼一大堆東西，太麻煩，因此咱們能夠在package.json文件裏面配置npm命令

配置好以後，咱們如今就能夠經過運行npm run build命令來運行項目
其實上面的命令配置完整一些好
補充這裏有一步省略了，那就是配置完config後，須要導出去，否則沒有效果的

module.exports = config

"build": "webpack --config webpack.config.js"

npm run build
一切運行正常，沒有報錯，說明咱們這個項目已經初步完成了