03-另一種配置 · webpack

``` 1.下載nodeJs 2.切換到當前目錄,命令node -v 和npm -v 3.npm 使用 4.npm init(cd..) 5.npm init -y(生成package.json) 6.npm install 包的名字 npm install webpack --save-dev 7.慢？淘寶鏡像(https://npm.taobao.org)cnpm 8.npm install webpack-cli --save-dev 9.進入(webpack) ./node_modules/.bin/webpack(報錯) 10.入口文件夾(src)與文件(index.js) 11.將index.js打包main.js 12.每次進入./node_modules/.bin/webpack，配置[test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。] 13.npm run webpack(刪除dist)再用 14.發現一個警告mode?none?直接敲打webpack報錯 15.在package.json找scripts配置"dev":"npm run webpack"--"webpack": "webpack", 16."dev":"npm run webpack -- --mode development" 17."prod":"npm run webpack -- --mode production"(3) 18.npm run dev(配置完記得保存) 生態與開發 19.在src下創建header.js 20.在header.js下使用Es6語法export const header = "一生所愛用一生下載你";導出 21.在index.js下 import 22.npm run prod 1.node文件夾index.js輸出 2.進入node文件夾 cd node/ 3.node index.js 22.node dist/main.js(反復更改反復打包)麻煩 23.配置監聽"prod":"npm run webpack -- --mode production --watch" 24.npm run prod (不再輸入而是監聽) 25.試一下，改變header.js 監聽不用重復打包 ---------------------------------------------------- 1.footer.js exprot index.js import 保存在main.js輸出(去除dead code) -------------------------------------------------------------------- 1.npm run dev main.js ---------------------------- 配置文件(webpack.config.js) 1.module.exports = {} node debag webpack 四個核心 2.Entry index:"index.js" 3.Output path: path.resolve(__dirname, 'dist'), filename: 'main.js' //npm run dev 4.Loders 轉換 01.npm install css-loader style-loader --save-dev 02.在src文件夾下創建index.css(寫樣式) 03.引入到index.js 04.npm run dev 05.服務器沒找到 npm install webpack-dev-server --save-dev?出乎意料 06.npm run dev 報錯 ./src/index.cc想要的結果 07識別不了css，配置Loders 08.在webpack.config.js下配置Loders 09.module:{rules:[{test:/\.css$/,use:["style-loader","css-loader"]}]}保存 10.npm run dev 11.在index.js中用es6寫法引入css import css from "./index.css" 12.報錯？再下載npm install css-loader style-loader --save-dev 13.localhost問題 14.去掉style-loader 這個沒有將字符串轉換JS屬性 15.npm run dev 有數組 16.+圖片test:/\.jpe?g$/, use:["url-loader"] 17.npm install url-loader file-loader --save-dev 18.npm run dev 19.在index.js下improt引入圖片import image from "./0.png"; 20.npm run dev ---------------------------------------------- 服務器(file不符合) 01.npm install webpack-dev-server --save-dev 02.在package.json下 "webpack-dev-server":"webpack-dev-server" 03."dev": "npm run webpack -- --mode development"改"dev": "npm run webpack-dev-server -- --mode development"不要--watch 04.npm run dev 05.保存()localhost:8080 06.刪除dist 07.npm run dev (文件上傳到服務器) 08.修改header.js中變量,自動打包(服務器好處) 09.在package中"dev": "npm run webpack-dev-server -- --mode development --hot"(快) 5.Plugins插件一：html-webpack-plugin 01.npm install html-webpack-plugin --save-dev 02.在wbepack.config.js引入包 var xxx = require 03.plugins:[new xxx()] 04.npm run dev 在dist下生成一個index.html 自動引入bundle.js 05.好處可以改bunndle.js成main.js 06.在src下創建index.html [{template:"./src/index.html"}] 07.刪除dist再npm run dev 二：webpack 01.new webpack.ProgressPlugin()進程 ```