标签：使用 exp div ports ade nod res entry bundle
package.json中的配置
{ "name": "code2", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "@babel/core": "^7.5.0", "@babel/preset-env": "^7.5.0", "babel-loader": "^8.0.6", "css-loader": "^3.0.0", "file-loader": "^4.0.0", "html-webpack-plugin": "^3.2.0", "jquery": "^3.4.1", "less": "^3.9.0", "less-loader": "^5.0.0", "style-loader": "^0.23.1", "url-loader": "^2.0.1", "webpack": "^4.35.2", "webpack-cli": "^3.3.5", "webpack-dev-server": "^3.7.2" }, "scripts": { "build": "webpack", "dev": "webpack-dev-server" } }
webpack.config.js中的配置
const path = require(‘path‘) const htmlWebpackPlugin = require(‘html-webpack-plugin‘) module.exports = { entry: ‘./src/main.js‘, output: { path: path.join(__dirname, ‘dist‘), filename: ‘bundle.js‘ }, mode: ‘development‘, plugins: [ new htmlWebpackPlugin({ template: path.join(__dirname, ‘./src/index.html‘), filename: ‘index.html‘ }) ], module: { rules: [ //处理css文件的规则 //yarn add style-loader css-loader { test: /\.css$/, use: [‘style-loader‘, ‘css-loader‘] }, //处理css文件的规则 //yarn add style-loader css-loader less less-loader -D { test: /\.less$/, use: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘] }, //处理图片--用file-loader实现 //yarn add file-loader -D // { // test: /\.(gif|png|jpe?g)$/, // use: ‘file-loader‘ // }, //处理图片--用url-loader实现 //yarn add file-loader url-loader -D { test: /\.(gif|png|jpe?g)$/, use: [{ loader: ‘url-loader‘, options: { limit: 10 * 1024 } }] },
//babel-loader把高版本的语法编译成低版本语法 { test: /\.js$/, exclude: /node_modules/, use: { loader: ‘babel-loader‘, options: { presets: [‘@babel/preset-env‘] } } } ] },
// 自动打包 devServer: { open: true, port: 3000, hot: true } }
标签：使用 exp div ports ade nod res entry bundle
原文地址：https://www.cnblogs.com/lixiaoxue/p/11150324.html
