webpack制作的总结

包描述文件（package.json）

npm init

修改详情 (modification details)

"license": "UNLISENCED",

可以放进去的东西。

• pug(htmlコンパイル)

• stylus(cssコンパイル)※Sass使う場合は変える

• ES6(babel)

• TypeScript（jsコンパイル）

• 画像圧縮

ブラウザシンク

确认最新版本

npm view ここにインストールするもの

▼ex
npm view webpack

▼バージョン指定で入れる場合
npm install --save-dev webpack@X.X.X

安裝內容

为了将此次版本加入到devDependencies里，使用–save-dev选项进行安装。

npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev mini-css-extract-plugin
npm install --save-dev stylus
npm install --save-dev stylus-loader
npm install --save-dev html-webpack-plugin
npm install --save-dev pug-html-loader
npm install --save-dev html-loader
npm install --save-dev clean-webpack-plugin
npm install --save-dev webpack-dev-server
npm install --save-dev babel-loader
npm install --save-dev @babel/core
npm install --save-dev @babel/preset-env
npm install --save-dev image-webpack-loader
npm install --save-dev react
npm install --save-dev react-dom
npm install --save-dev @types/node
npm install --save-dev @babel/preset-react
npm install --save-dev typescript
npm install --save-dev ts-loader
npm install --save-dev @types/react

一次性放进去

npm install --save-dev webpack webpack-cli css-loader style-loader mini-css-extract-plugin stylus stylus-loader html-webpack-plugin pug-html-loader html-loader clean-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env image-webpack-loader react react-dom @types/node @babel/preset-react typescript ts-loader @types/react

目录结构

webpack
├─ node_modules
├─ package.json
├─ package-lock.json
├─ webpack.config.js
├─ tsconfig.json
├─ src
│ ├─ pug
│ │ ├─ about
│ │ │  └─ index.pug
│ │ └─ index.pug
│ ├─ style
│ ├─ js
│ └─ images
└─ dist
  ├─ css
  ├─ js
  ├─ images
  ├─ about
  │  └─ index.pug
  └─ index.html

执行指令

npm run start //開発
npm run build //本番

使用 webpack 写代码要注意的事项。

• module内のuseの読み込みは上からではなく下から上に読み込み進んでいく

vueを入れる場合はバージョンによって書き方が変わる