打包其他文件 · 前端

新建項目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 ```