webpack配置js打包+css分离+图片压缩

css分离用了extract-text-webpack-plugin插件,js压缩用了uglifyjs-webpack-plugin插件or用webpack自带的webpack.optimize.UglifyJsPlugin方法

webpack.config.js

const path = require('path');
const uglify = require('uglifyjs-webpack-plugin');
const htmlWebpackPlugin = require('html-webpack-plugin');
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    context: path.join(__dirname, 'src'), //设置根目录
    entry:{
        entry:'./entry.js' //入口文件
    },
    output:{
        path: path.resolve(__dirname,'dist/js'), //打包输出文件
        filename: '[name].js', //输出文件名
        publicPath: '/'  //html引用的虚拟路径
    },
    module:{
        rules:[
            {
              test:'/\.(js|jsx)$/',
              exclude: /node_modules/, //  忽略依赖
              use:['babel-loader']
            },
            {
              test:/\.css$/,
              use:extractTextWebpackPlugin.extract({  //打包css文件以及分离
                  fallback:'style-loader',
                  use:[
                      {
                          loader:'css-loader'
                      },
                      {
                          loader:'postcss-loader', //加浏览器前缀
                          options:{
                              plugins: [
                                  require('autoprefixer') //要设置下postcss里的autoprefixer插件
                              ]
                          }
                      }
                  ]
              })
            },
            {
              test:/\.less$/,
              use:extractTextWebpackPlugin.extract({ //打包less文件成css以及分离
                  use: ['css-loader','less-loader'],
                  // loader:['css-loader','less-loader'],
                  // use:'css-loader!less-loader',
                  fallback: "style-loader"
              })
            },
            {
              test:/\.(sass|scss)$/,
                use:extractTextWebpackPlugin.extract({ ////打包scss文件成css以及分离
                    use:['css-loader','sass-loader',{
                        loader:'postcss-loader',  //加浏览器前缀 
                        options: {
                            plugins: (loader) => [
                                require('autoprefixer'), //要配置下postcss里的autoprefixer插件
                            ]
                        }
                    }]
                })
            },
            {
                test:/\.(jpg|png|gif|jpeg)$/,
                use:[
                    {
                        loader:'url-loader', //图片压缩
                        options:{
                            limit:8192,
                            name:'images/[name][hash:8].[ext]', //指定名字
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin(), //js压缩
        new htmlWebpackPlugin({
            minify:{
                removeAttributeQuotes:true
            },
            hash:true,
            template:'index.html'
        }),
        new extractTextWebpackPlugin("css/[name].css"), //配置分离css文件的路径名
        new webpack.ProvidePlugin({ //配置jquery
            $: "jquery", //别名
            jQuery: "jquery"
        })
    ],
    node: {
        fs: 'empty'
    },
    devServer:{
        contentBase:path.resolve(__dirname,'dist'), //根目录路径
        host:'localhost',
        inline: true, //实时刷新
        hot:true,  //热加载
        compress:true, //压缩
        port:7777
    }
};

css

.pic{
    background:url('../images/xika.jpeg');
    width:500px;
    height:500px;
    background-size:cover;
}

less

@bg:#F7F7F7;
body{
  background:@bg;
}

scss

@mixin borderCircle {
  border-radius:50%;
}
@mixin display-flex {
  display: flex;
}
.pic{
  @include borderCircle;
  @include display-flex;
}

entry.js

import css from './css/index.css';
import less from './less/index.less';
import scss from './scss/index.scss';
import bootstrap from 'bootstrap/dist/css/bootstrap.css';

$('#app').addClass('text-center container');
$('.pic').css('margin','100px auto 50px');
$('#app').append('<h1>hello xika</h1>')

package.json

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "webpack-dev-server --inline --hot"
},

打开localhost:7777