北京棋森建设有限公司网站,宜昌营销型网站建设,网站设计与制,网站开发所需要的书籍A.打包样式资源
1. 创建文件 2. 下载安装 loader 包
npm i css-loader style-loader less-loader less -D
3. 修改配置文件
/*webpack.config.js webpack的配置文件作用: 指示 webpack 干哪些活#xff08;当你运行 webpack 指令时#xff0c;会加载里面的配置#xff…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和lessless-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. 使用配置loaderplugins: 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/CSStemplate: ./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}
};
