webpack 开发环境的基本配置(webpack打包样式资源、html、图片、devserver、开发环境配置、以及其他资源)

A.打包样式资源

1. 创建文件

2. 下载安装 loader 包

npm i css-loader style-loader less-loader less -D

3. 修改配置文件

/*webpack.config.js  webpack的配置文件作用: 指示 webpack 干哪些活（当你运行 webpack 指令时，会加载里面的配置）所有构建工具都是基于nodejs平台运行的~模块化默认采用commonjs。
*/// resolve用来拼接绝对路径的方法
const { resolve } = require('path');module.exports = {// webpack配置// 入口起点entry: './src/index.js',// 输出output: {// 输出文件名filename: 'built.js',// 输出路径// __dirname nodejs的变量，代表当前文件的目录绝对路径path: resolve(__dirname, 'build')},// loader的配置module: {rules: [// 详细loader配置// 不同文件必须配置不同loader处理{// 匹配哪些文件test: /\.css$/,// 使用哪些loader进行处理use: [// use数组中loader执行顺序：从右到左，从下到上 依次执行// 创建style标签，将js中的样式资源插入进行，添加到head中生效'style-loader',// 将css文件变成commonjs模块加载js中，里面内容是样式字符串'css-loader']},{test: /\.less$/,use: ['style-loader','css-loader',// 将less文件编译成css文件// 需要下载 less-loader和less'less-loader']}]},// plugins的配置plugins: [// 详细plugins的配置],// 模式mode: 'development', // 开发模式// mode: 'production'
}

4. 运行指令: webpack

B.打包 HTML 资源

1. 创建文件

 2. 下载安装 plugin 包

npm install --save-dev html-webpack-plugin

3. 修改配置文件

/*loader: 1. 下载   2. 使用（配置loader）plugins: 1. 下载  2. 引入  3. 使用
*/
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置]},plugins: [// plugins的配置// html-webpack-plugin// 功能：默认会创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）// 需求：需要有结构的HTML文件new HtmlWebpackPlugin({// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（JS/CSS）template: './src/index.html'})],mode: 'development'
};

4.运行指令: webpack

C.打包图片资源

1. 创建文件

2. 下载安装 loader 包

npm install --save-dev html-loader url-loader file-loader

3. 修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.less$/,// 要使用多个loader处理用useuse: ['style-loader', 'css-loader', 'less-loader']},{// 问题：默认处理不了html中img图片// 处理图片资源test: /\.(jpg|png|gif)$/,// 使用一个loader// 下载 url-loader file-loaderloader: 'url-loader',options: {// 图片大小小于8kb，就会被base64处理// 优点: 减少请求数量（减轻服务器压力）// 缺点：图片体积会更大（文件请求速度更慢）limit: 8 * 1024,// 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs// 解析时会出问题：[object Module]// 解决：关闭url-loader的es6模块化，使用commonjs解析esModule: false,// 给图片进行重命名// [hash:10]取图片的hash的前10位// [ext]取文件原来扩展名name: '[hash:10].[ext]'}},{test: /\.html$/,// 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）loader: 'html-loader'}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};

4. 运行指令: webpack

D.打包其他资源

1. 创建文件

 2. 修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css资源以外的资源){// 排除css/js/html资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development'
};

3.webpack+文件运行文件

E.devserver

1. 创建文件

2 . 修改配置文件

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/index.js',output: {filename: 'built.js',path: resolve(__dirname, 'build')},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']},// 打包其他资源(除了html/js/css资源以外的资源){// 排除css/js/html资源exclude: /\.(css|js|html|less)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]'}}]},plugins: [new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',// 开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器~~）// 特点：只会在内存中编译打包，不会有任何输出// 启动devServer指令为：npx webpack-dev-serverdevServer: {// 项目构建后路径contentBase: resolve(__dirname, 'build'),// 启动gzip压缩compress: true,// 端口号port: 3000,// 自动打开浏览器open: true}
};

4. 运行指令: npx webpack-dev-serve

F.开发环境配置

开发环境配置简单来说就是将打包技术进行整合

1.创建文件

 2. 修改配置文件

/*开发环境配置：能让代码运行运行项目指令：webpack 会将打包结果输出出去npx webpack-dev-server 只会在内存中编译打包，没有输出
*/const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {entry: './src/js/index.js',output: {filename: 'js/built.js',path: resolve(__dirname, 'build')},module: {rules: [// loader的配置{// 处理less资源test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']},{// 处理css资源test: /\.css$/,use: ['style-loader', 'css-loader']},{// 处理图片资源test: /\.(jpg|png|gif)$/,loader: 'url-loader',options: {limit: 8 * 1024,name: '[hash:10].[ext]',// 关闭es6模块化esModule: false,outputPath: 'imgs'}},{// 处理html中img资源test: /\.html$/,loader: 'html-loader'},{// 处理其他资源exclude: /\.(html|js|css|less|jpg|png|gif)/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},plugins: [// plugins的配置new HtmlWebpackPlugin({template: './src/index.html'})],mode: 'development',devServer: {contentBase: resolve(__dirname, 'build'),compress: true,port: 3000,open: true}
};