一个简易的webpack开发环境

墨蓝 2022-01-20 10:09 252阅读 0赞

本菜鸟搭建的入门级别的webpack环境， 仅供参考，webpack学精很不容易，每个插件作者都有自己的思想。 待我吃透了再说。 待我后续完善， 目前可以

*  提取图片
 *  服务器环境 支持跨域 热更新
 *  ES6语法降级
 *  less 转 es6

//压缩js插件
    var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    // 
    var webpack = require('webpack');
    //提取公共代码
    var ExtractTextPlugin = require("extract-text-webpack-plugin");
    //在使用时将不再需要import和require进行引入， ProvidePlugin进行实例初始化后，jquery就会被自动加载并导入对应的node模块中
    var providePlugin = new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' });
    module.exports = {
        entry: { //多入口
            index: './src/js/index.js',
            goodsInfo: './src/js/goodsInfo.js'
        },
        output: {//多出口
            filename: '[name].js',
            path: __dirname + '/out',
            publicPath: 'http://localhost:8080/out'
        },
        module: {
            rules: [
                { test: /.js$/, use: ['babel-loader'] }, //js语法降级
                // { test: /.css$/, use: ['style-loader', 'css-loader'] }, //css
                {
                    test: /.css$/,
                    use: ExtractTextPlugin.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    })
                },
                { test: /.jpg|png|gif|svg$/, use: ['url-loader?limit=8192&name=./[name].[ext]'] },
                //设置尺寸名字和扩展名
                { test: /.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
            ]
        },
        plugins: [
            new UglifyJSPlugin(),
            new webpack.optimize.CommonsChunkPlugin({
                name: "commons",
                filename: "commons.js",
                minChunks: 2
            }),
            new ExtractTextPlugin("[name].css"),
            providePlugin
        ],
        devServer: {
            quiet: false, //控制台中不输出打包的信息
            open: true, //打开浏览器
            noInfo: false,
            hot: true, //开启热点
            inline: true, //开启页面自动刷新
            lazy: false, //不启动懒加载
            progress: true, //显示打包的进度
            watchOptions: {
                aggregateTimeout: 300
            },
            port: '8088', //设置端口号
            proxy: { //跨域
                '/api': {
                    target: 'http://localhost:80', //目标服务器
                    ws: true, //开启websocket
                    changeOrigin: true, //开启代理
                    pathRewrite: {
                        '^/api': '/api' // 会请求到 http://localhost:80/api
                    }
                }
            }
        }
    }
    复制代码

package.json文件

{
      "name": "webpack1",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "duyi": "webpack-dev-server --devtool eval-source-map --progress --colors"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "babel": "^6.23.0",
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.3",
        "css-loader": "^0.28.10",
        "file-loader": "^1.1.9",
        "style-loader": "^0.20.2",
        "uglifyjs-webpack-plugin": "^1.2.2",
        "url-loader": "^0.6.2",
        "webpack": "^3.5.5"
      },
      "devDependencies": {
        "extract-text-webpack-plugin": "^3.0.2",
        "jquery": "^3.3.1",
        "less": "^3.0.1",
        "less-loader": "^4.0.6"
      }
    }
    
    复制代码