7 配置完成后的package.json与webpack.config.js
"scripts": { "dev": "webpack serve", "build": "webpack --mode production" },
// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // devtool: 'eval-source-map', devtool: 'nosources-source-map', // 代表webpack运行的模式，可选值有两个development和production mode: 'development', entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'js/main.js' }, // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin,new CleanWebpackPlugin()], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:80, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] } }
8 使用@代替./ …/
@代表src源代码目录
使用@从src开始向内查找
使用./ …/ 从当前文件向外查找
8.1 配置
webpack.config.js文件
const path = require('path') //导入html-webpack-plugin插件 得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // new构造函数创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 filename: './index.html' }) const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { // devtool: 'eval-source-map', devtool: 'nosources-source-map', // 代表webpack运行的模式，可选值有两个development和production mode: 'development', entry: path.join(__dirname, './src/index.js'), output: { path: path.join(__dirname, 'dist'), filename: 'js/main.js' }, // 插件的数组 将来webpack在运行时会加载并调用这些插件 plugins: [htmlPlugin,new CleanWebpackPlugin()], devServer: { // 首次打包成功后自动打开浏览器 open:true, // 在http协议中如果端口号为80可以省略 port:8080, // 指定主机运行的地址 host:'127.0.0.1' }, module: { rules:[ {test:/\.css$/, use:['style-loader', 'css-loader']}, {test:/\.less$/, use:['style-loader', 'css-loader', 'less-loader']}, // 处理图片文件的loader // 如果需要调用的loader只有一个，则只传递一个字符串就行，如果有多个loader则必须指定数组 { test:/\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }, // 使用babel-loader处理高级的js语法 // 注意：必须使用exclude排除指定项；因为node_modules目录下的第三方包不需要被打包 {test:/\.js$/, use: 'babel-loader', exclude: /node_modules/} ] }, resolve: { alias: { //告诉webpack @代表src这一层目录 '@' : path.join(__dirname, './src/') } } }
