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 ~~~