webpack · 有點用

### webpack是什么？就是個打包機 ### 環境安裝 node環境 win npm安裝 ~~~ 初始化一個項目 npm init -y // 最新版本需要安裝cli npm install webpack webpack-cli --save-dev ~~~ ### 修改配置文件確保我們安裝包是私有的(private) ~~~ { "name": "webpack-demo", "version": "1.0.0", "description": "", + "private": true, - "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "webpack": "^4.0.1", "webpack-cli": "^2.0.9" }, "dependencies": {} } ~~~ ### 創建源碼文件包 src 并建立打包入口文件index.js 和頁面文件index.html 內容如下 ### index.js ~~~ function component() { var element = document.createElement('div'); // Lodash（目前通過一個 script 腳本引入）對于執行這一行是必需的 element.innerHTML = _.join(['Hello', 'webpack'], ' '); return element; } document.body.appendChild(component()); ~~~ #### index.html ~~~ <!doctype html> <html> <head> <title>起步</title> <script src="https://unpkg.com/lodash@4.16.6"></script> </head> <body> <script src="./src/index.js"></script> </body> </html> ~~~ ### 創建管理腳本配置文件 webpack.config.js ~~~ const path = require('path'); module.exports = { entry: './src/index.js',// 入口文件 output: { filename: 'bundle.js', // 輸出文件 path: path.resolve(__dirname, 'dist') // 輸出路徑 } }; ~~~ 修改package.json ~~~ "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, ~~~ ### 加載css處理器圖片處理器字體處理器 ~~~ npm install --save-dev style-loader css-loader npm install --save-dev file-loader ~~~ ### 安裝插件 ~~~ 生成插件 npm install --save-dev html-webpack-plugin 清理插件 npm install clean-webpack-plugin --save-dev 提取css為單獨文件 npm install --save-dev extract-text-webpack-plugin ~~~