码迷,mamicode.com
首页 > Web开发 > 详细

webpack配置:css文件打包和JS压缩打包

时间:2018-03-26 19:48:33      阅读:686      评论:0      收藏:0      [点我收藏+]

标签:image   run   server   write   loader   font   dir   document   div   

一、CSS文件打包

  1、在src下新建css文件,在css文件下新建index.css文件,输入以下代码

body{
    color:red;
    font-size:20px;
}

  2、css建立好后,需要引入到入口文件,这里我们引入到index.js中

import css from ./css/index.css;

document.write("It works.");

  3、在终端安装style-loader和css-loader

技术分享图片

  4、安装好后,我们开始在webpack.config.js中配置module选项

//模块:例如解读CSS,图片如何转换,压缩
module:{
    rules:[
        {
            test:/\.css$/,
            use:[style-loader,css-loader]
        }
    ]
},

  5、在终端输入 npm run server,可以看到出来的效果有了样式。

技术分享图片

二、JS压缩打包

1、首先在webpack.config.js中引入

const uglify = require(uglifyjs-webpack-plugin);

2、然后在plugins里配置

//插件,用于生产模版和各项功能
plugins:[
    new uglify()
],//  插件,多个插件,所以是数组
const path = require(path);
const uglify = require(uglifyjs-webpack-plugin);
module.exports={
    //入口文件的配置项
    entry:{
        entry:./src/index.js
    },
    //出口文件的配置项
    output:{
        //输出的路径,用了Node语法
        path:path.resolve(__dirname,dist),
        //输出的文件名称
        filename:bundle.js
    },
    mode:"development",
    //模块:例如解读CSS,图片如何转换,压缩
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[style-loader,css-loader]
            }
        ]
    },
    //插件,用于生产模版和各项功能
    plugins:[
        new uglify()
    ],//  插件,多个插件,所以是数组
    //配置webpack开发服务功能
    devServer:{
        contentBase:path.resolve(__dirname,dist),//本地服务器所加载的页面所在的目录
        host:192.168.118.221,
        compress:true,
        port:8081
    }//  配置webpack服务
}

3、在终端输入webpack,你会发现JS代码已经被压缩了

技术分享图片

 

webpack配置:css文件打包和JS压缩打包

标签:image   run   server   write   loader   font   dir   document   div   

原文地址:https://www.cnblogs.com/goloving/p/8653041.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!