打包其他文件 · 前端

新建项目webpack-elsefile 在阿里云官网下载矢量图标放入项目文件夹结构如下： ![](https://img.kancloud.cn/c0/18/c01833f5eaaf11a374aa7c988b1931ee_224x190.png) **新建项目文件** src/index.html ~~~ <!DOCTYPE html> <html> <head> <title>title</title> </head> <body> </body> </html> ~~~ src/index.js ~~~ import './iconfont.css'; ~~~ webpack.config.js ``` //引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //resolve用来解决绝对路径的 const {resolve} = require('path'); module.exports = { mode:'development',//development和production //打包的入口文件 entry: './src/index.js', output: { //输出路径，__dirname是nodejs的变量代表当前文件的目录绝对路径 path: resolve(__dirname, 'dist'), //打包输出的文件名 filename: 'built.js' }, module: { //不同的文件配置不同的loader rules: [ { //匹配css文件 test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { //打包其他资源（除html/css/js以外的其他资源） //排除html/css/js ,如果使用了其他loader打包如图片、less，则还需要加上这些排除掉 exclude:/\.(html|css|js)$/, //其实用'url-loader'稳当点，它是依赖'file-loader'的 loader: 'file-loader', options: { limit: 8 * 1024, name:'[hash:10].[ext]' } } ] }, plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ] }; ``` 之前的项目都是将node_modules安装在项目内的每个项目都要重复下载一遍loader和插件等，这次我们将他安装在项目外 ~~~ npm init npm install webpack webpack-cli -g （整个系统只安装一次） npm install webpack webpack-cli --save-dev ~~~ 安装css-loader style-loader插件 ~~~ npm i css-loader style-loader -D ~~~ 下载lhtml-webpack-plugin插件 ~~~ npm i html-webpack-plugin -D ~~~ 下载file-loader ``` npm i file-loader -D ```