webpack ---- 配置完成后的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/}
        ]
    }
}

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/')
        }
    }
}