## webpack的学习笔记 ### webpack起步 webpack是基于node的 ### 使用 ``` npm install webpack -g // 全局安装webpack //首次使用的问题 // webpack 源文件 --output 目的文件的路径 --mode development webpack src/main.js --output dist/build.js --mode development ``` ### webpack的配置文件 ``` // webpack的配置对象 const path = require('path') // 启用热更新 第2步 const webpack = require('webpack') // 导入在内存中生成的HTML页面的组件 const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { //表示要使用webpack打包哪一个文件 entry: path.join(__dirname, './src/main.js'), // 输出的目录 output: { path: path.join(__dirname, './dist'), filename: 'build.js' }, devServer: { open: true, //自动打开浏览器 port: 3000, //启动浏览器的端口 contentBase: 'src', //指定的托管的目录 hot: true //启动热更新的第一步 }, plugins: [ new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块 // 在内存中创建一个HTML的模板的页面 new HtmlWebpackPlugin({ // 指定模板的页面， 会在内存中根据这个页面来生成页面 template: path.join(__dirname, './src/index.html'), // 指定生成的页面的名称 filename: 'index.html' }) /*new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }),*/ ] } ``` ### webpack-dev-server的使用 #### 安装 ``` //安装 npm install webpack-dev-server --save-dev ``` #### 配置（package.json） ``` { "name": "webpack-4", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev1": "webpack-dev-server --open --port 3000 --contentBase src --hot", //第一种配置方式 第二种见webpack的配置文件 "dev": "webpack-dev-server", "build": "webpack --mode production" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.3.1" }, "devDependencies": { "webpack": "^4.26.1", "webpack-cli": "^3.1.2", "webpack-dev-server": "^3.1.10" } } ``` ``` // dev-server 的参数的第一种配置方式的参数说明 webpack-dev-server --open --port 3000 --contentBase src --hot ``` * --open --port 3000 : 自动打开浏览器的3000端口 * --contentBase src：自动打开src下的HTML的首页 * --hot: 实现浏览器的无刷新自动更新 ### html-webpack-plugin的使用 #### 安装 ``` //安装 npm install html-webpack-plugin --D ``` #### 作用 1. 自动在内存中根据指定的页面生成一个内存的页面 2. 自动将打包好的build.js添加到页面中去 #### 配置 ``` plugins: [ new webpack.HotModuleReplacementPlugin(), //new一个热更新的模块 // 在内存中创建一个HTML的模板的页面 new HtmlWebpackPlugin({ // 指定模板的页面， 会在内存中根据这个页面来生成页面 template: path.join(__dirname, './src/index.html'), // 指定生成的页面的名称 filename: 'index.html' }) /*new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }),*/ ] ``` ### loader的使用 webpack默认只能处理js的文件 #### style-loader css-loader ``` npm i style-loader css-loader -D ``` ``` /*配置第三方的模块的匹配的规则*/ module:{ rules: [ {test: /\.css$/, use:['style-loader', 'css-loader']}, //配置处理css的第三方loader ] } ``` webpack处理第三方文件的顺序 * 如果不是js的文件，就会在配置文件中寻找合适的loader * 在调用loader的顺序是从后向前进行调用的 * 当最后一个loader调用完毕后再交给web pack打包 loader 的调用顺序