zoukankan      html  css  js  c++  java
  • 3.webpack配置

    1.项目目录

    2.配置代码
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    const ExtractTextPlugin = require('extract-text-webpack-plugin');
    const webpack = require('webpack');
    module.exports = {
    entry: './src/app.jsx',
    output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/app.js',
    publicPath: "/dist/"
    },
    module: {
    rules: [
    //jsx
    {
    test: /.jsx$/,
    exclude: /(node_modules)/,
    use: {
    loader: 'babel-loader',
    options: {
    presets: ['env','react']//根据环境打包(浏览器,node)
    }
    }
    },
    //css
    {
    test: /.css$/,
    use: ExtractTextPlugin.extract({
    fallback: "style-loader",
    use: "css-loader"
    })
    },
    //sass
    {
    test: /.scss$/,
    use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader', 'sass-loader']
    })
    },
    //图片的配置
    {
    test: /.(png|jpg|gif)$/i,
    use: [
    {
    loader: 'url-loader',
    options: {
    limit: 8192,
    name:'resource/[name].[ext]'
    }
    }
    ]
    },
    //字体的配置
    {
    test: /.(otf|eot|svg|ttf|woff|woff2)$/i,
    use: [
    {
    loader: 'url-loader',
    options: {
    limit: 8192,
    name:'resource/[name].[ext]'
    }
    }
    ]
    }
    ]
    },
    plugins: [
    //处理css文件
    new HtmlWebpackPlugin({
    template:'./src/index.html'
    }),
    //独立css
    new ExtractTextPlugin("css/[name].css"),//参数为生成css的位置
    //提取公共模块
    new webpack.optimize.CommonsChunkPlugin({//webpack自带插件,不用安装
    name:'common',
    filename:'js/base.js'
    })
    ],
    devServer: {
    // contentBase: path.join(__dirname, 'dist'),
    port: 9999
    }
    };
  • 相关阅读:
    互动媒体学习社区-ASP.NET MVC 后台用户管理模块
    互动媒体学习社区-ASP.NET MVC 开发步骤
    互动媒体学习社区-ASP.NET MVC 数据库设计
    辗转相除法求最大公约数和最小公倍数分析
    C语言循环
    C语言中语句的跨行支持总结
    值得一学的C语言
    概率论
    Saul's Blog
    深入浅出 神经网络
  • 原文地址:https://www.cnblogs.com/ipoodle/p/9614291.html
Copyright © 2011-2022 走看看