webpack配置

Posted 2021-03-18 lazypet

{
    "name": "sdasd",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo "Error: no test specified" && exit 1",
        "build": "webpack --config ./build/prod.config.js",
        "dev": "webpack-dev-server --open --config ./build/dev.config.js"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "babel-core": "^6.26.3",
        "babel-loader": "^7.1.5",
        "babel-preset-es2015": "^6.24.1",
        "css-loader": "^2.0.2",
        "file-loader": "^3.0.1",
        "html-webpack-plugin": "^3.2.0",
        "less": "^3.9.0",
        "less-loader": "^4.1.0",
        "style-loader": "^0.23.1",
        "uglifyjs-webpack-plugin": "^1.1.1",
        "url-loader": "^1.1.2",
        "vue-loader": "^13.0.0",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^3.6.0",
        "webpack-dev-server": "^2.9.3",
        "webpack-merge": "^4.2.2"
    },
    "dependencies": {
        "vue": "^2.6.11"
    }
}

const path = require(‘path‘)
const webpack = require(‘webpack‘)
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘)
const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘)
module.exports = {

    entry: ‘./src/main.js‘,
    output: {
        path: __dirname + ‘/dist/‘,
        filename: ‘boundle.js‘,
        // publicPath: ‘dist/‘ //在dist文件中加载图片路径起作用
    },
    //这里是loader的配置 css
    module: {
        rules: [{
            test: /.css$/,
            use: [‘style-loader‘, ‘css-loader‘] //使用多个loader是,加载从右向左
        }, {
            test: /.less$/,
            use: [{
                loader: ‘style-loader‘
            }, {
                loader: ‘css-loader‘
            }, {
                loader: ‘less-loader‘
            }]
        }, {
            test: /.(png|jpg|gif|jpeg)/,
            use: [{
                loader: ‘url-loader‘,
                options: {
                    limit: ‘1300‘, //当图片大小小于limit时会将图片编译成base64字符串形式 单位是bit 依赖 url-loader
                    //当图片大于limit时依赖于file-loader and file-loader
                    name: ‘img/[name].[hash:8].[ext]‘ //中括号内存放变量 为file-loader打包的文件命名
                }

            }]
        }, { //这里是bable的配置 将es6转化为es5
            test: ‘/.js$/‘,
            exclude: /(node_modules|bower_components)/, //exclude 排除文件
            use: {
                loader: ‘babel-loader‘,
                options: {
                    presets: [‘es2015‘]
                }
            }
        }, { //缺少插件 vue-loader版本过高
            test: /.vue$/,
            use: [‘vue-loader‘]
        }]
    },

    resolve: { //resove 帮我们解决路径问题
        extensions: [‘.js‘, ‘.css‘, ‘.vue‘], //这样导入的时候就可以省略后缀了
        alias: { //alias:别名
            ‘vue$‘: ‘vue/dist/vue.esm.js‘ //通过别名，我们可以让webpack在打包的时候，不通过默认的方式去
                //找文件，而是通过指定的路径去找文件 如这里 我们用 vue的 runtime compaire版本代替 runtime only
        }
    },
    //
    plugins: [
        new webpack.BannerPlugin(‘最终版权归lazypet所有‘), //添加版权的插件 BannerPlugin
        //HtmlWebpackPlugin插件 功能自动生成一个index.html文件 将要打包的js文件自动通过script标签插入到body中
        new HtmlWebpackPlugin({
            template: ‘index.html‘
        }),
        //压缩代码插件
        new UglifyjsWebpackPlugin()
    ],
    //webpack server配置 局部安装最好设置脚本
    devServer: {
        contentBase: ‘./dist‘, //指明webpack server 服务的文件夹
        inline: true //是否实时的进行监听
            // port：端口号 默认在8080端口
            //historyApiFallback
    }

}