webpack4 单入口文件配置 多入口文件配置 以及常用的配置
单入口文件配置
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html模板,以便在多个入口文件时,不用手动修改引入的js module.exports = { entry: './src/index.js', plugins: [//配置html-webpack-plugin new HtmlWebpackPlugin({ title: 'Output Management' }) ], output: { filename: 'bundle.js',//打包后文件的名字 path: path.resolve(__dirname, 'dist'),//打包后文件的输出目录 }, module: { rules: [ {//打包css文件(可以用import在js中引入css文件) test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, {//加载图片(js或css中引入图片时) test: /\.(png|svg|jpg|gif)$/, use: [ { loader: 'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载字体 test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ // 'file-loader' { loader:'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载数据之csv与tsv test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, {//加载数据之xml json不用配置就可以直接加载 test: /\.xml$/, use: [ 'xml-loader' ] } ] } };
package.json
{ "name": "vueOrigin", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^2.1.1", "csv-loader": "^3.0.2", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "xml-loader": "^1.2.1" } }
多入口文件 配置
webpack.config.js
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html模板,以便在多个入口文件时,不用手动修改引入的js const webpack = require('webpack'); module.exports = { entry: { app: './src/app.js', index: './src/index.js', }, devServer: {//使用观察者模式(启动一个服务器,当文件有变动时,页面立即改变) contentBase: path.join(__dirname, "dist"),//将dist目录设置为可访问文件 compress: true,//一切服务都启用gzip 压缩 port: 9000,//指定服务器监听的端口 8080:为默认端口 hot: true,//告诉服务器,正在使用模块热替换 }, devtool: 'inline-source-map',//若有报错,报错信息会具体到某一个js文件的某一行 plugins: [//配置html-webpack-plugin new HtmlWebpackPlugin({ title: '这个是html模板', template: 'index.html',//配置html模板 inject:true, //是否自动在模板文件添加 自动生成的js文件链接 minify:{ removeComments:true //是否压缩时 去除注释 } }), new webpack.NamedModulesPlugin(),//模块热替换相关 new webpack.HotModuleReplacementPlugin(),//模块热替换相关 ], output: { filename: '[name].bundle.js',//打包后文件的名字 path: path.resolve(__dirname, 'dist'),//打包后文件的输出目录 }, module: { rules: [ {//打包css文件(可以用import在js中引入css文件) test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, {//加载图片(js或css中引入图片时) test: /\.(png|svg|jpg|gif)$/, use: [ { loader: 'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载字体 test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader:'file-loader', options:{ name: '[path][name].[ext]',//配置自定义文件模板 outputPath: '.',//配置打包后的输出目录(.代表在dist目录中生成) } } ] }, {//加载数据之csv与tsv test: /\.(csv|tsv)$/, use: [ 'csv-loader' ] }, {//加载数据之xml json不用配置就可以直接加载 test: /\.xml$/, use: [ 'xml-loader' ] } ] } };
package.json
{ "name": "vueOrigin", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --open", "build": "webpack", "dev": "webpack" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "css-loader": "^2.1.1", "csv-loader": "^3.0.2", "file-loader": "^3.0.1", "html-webpack-plugin": "^3.2.0", "style-loader": "^0.23.1", "webpack": "^4.30.0", "webpack-cli": "^3.3.1", "webpack-dev-server": "^3.3.1", "xml-loader": "^1.2.1" } }
注意,使用webpack-dev-server时,将不会在本地生成dist静态文件,生成的打包后的文件将会存在内存中,不要大惊小怪,若想看到本地dist文件,不要开启webpack-dev-server服务器