一、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:
}// 配置webpack服务
}

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

三、HTML文件发布

1、把dist中的index.html复制到src目录中,并去掉我们引入的js

2、在webpack.config.js中引入

const htmlPlugin = require('html-webpack-plugin');

3、引入后进行安装   npm install html-webpack-plugin --save-dev

4、在webpack.config.js中进行插件配置

plugins:[
new uglify(),
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
],// 插件,多个插件,所以是数组

5、在终端中输入webpack,进行打包,你会看到index.html文件已经被我们打包到dist文件目录下了,并且自动引入了js文件

webpack配置:css文件打包、JS压缩打包和HTML文件发布的更多相关文章

  1. r.js压缩打包(require + backbone)项目开发文件

    最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了 AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是A ...

  2. r.js压缩打包

    AMD模块化开发中的代码压缩打包工具——r.js 环境搭建基于nodejs:用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的 javascript部分 压缩javascript项目开 ...

  3. webpack 3.X学习之JS压缩与打包HTML文件

    js压缩 webpack自带一个插件uglifyjs-webpack-plugin来压缩js,所以不需要再次安装,当一切都准备妥当,引入uglifyjs-webpack-plugin模块: const ...

  4. mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...

  5. webpack 配置 (支持 React SCSS ES6 编译打包 和 模块热更新 / 生成SourceMap)

    1.首先是目录结构 |-node_modules/ #包文件 |-build/ #静态资源生成目录 |-src/ #开发目录 |-js/ |-index.js #入口文件 |-app.js #Reac ...

  6. webpack配置:增加babel支持、打包后调试

    一.babel支持 Babel其实是几个模块化的包,其核心功能位于称为babel-core的npm包中,webpack可以把其不同的包整合在一起使用,对于每一个你需要的功能或拓展,你都需要安装单独的包 ...

  7. Webpack, 现在最流行的模块打包工具.压缩打包

    压缩bundle.js 1.把我们项目的代码从es6 -> es5 [babel] 参考:http://babeljs.io/docs/setup/#installation 1.1.安装包 b ...

  8. webpack配置css浏览器前缀

    webpack打包时,css自动添加浏览器前缀.我们需要用到一个Loader:postcss-loader,和一个插件:autoprefixer 安装 npm i postcss-loader aut ...

  9. webpack配置css相关loader注意先后顺序

    一.问题描述 在webpack3中,引入animate.css失败. 二.问题分析 1.难道是入口main.js引用方式不对? import animate from 'animate.css' 2. ...

随机推荐

  1. 列出top中的pid

    #!/usr/bin/env python import os import string #方法1:通过字符串的isdigits来判断 #filelist = os.listdir('/proc') ...

  2. 转:js中javascript:void(0) 真正含义

    from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常 ...

  3. (转)Git冲突:commit your changes or stash them before you can merge. 解决办法

    用git pull来更新代码的时候,遇到了下面的问题: error: Your local changes to the following files would be overwritten by ...

  4. UVALIVE 3939 Plucking fruits

    并查集解决.代码跑的有够慢.应该可以通过边权排序优化. #include <map> #include <set> #include <list> #include ...

  5. python数据类型-----字符串

    今天来总结下python3.4版本字符串的一些操作方法,对这些方法先作一个简单的分类,按照分类来进行总结. Sequence Typessequence类型有六种:strings, byte sequ ...

  6. 浏览器内核测试 v0.99

    操作系统:  Windows 7 浏览器内核: WebKit 内核(Chrome) 内核版本是: WebKit 537.36( Chrome 49.0.2593.0 S) 完整代码: Mozilla/ ...

  7. AC日记——[JSOI2008]火星人prefix bzoj 1014

    1014 思路: 平衡树+二分答案+hash: 好了懂了吧. 代码: #include <cstdio> #include <cstring> #include <ios ...

  8. 利用navigator对象判断设备类型

    function getTerminalType() { //获取navigator对象 var o = navigator.userAgent, t = ""; if (/\bi ...

  9. KMP+差分 文章过滤器 (filter)

    Description 给定一些短串,要求你在一个长串中,将这些短串部分变为\(*\) Input 第一行包括一个整数\(n\),表示短串的数量. 接下来的\(n\)行,为\(n\)个短串. 最后一行 ...

  10. 使用lookup-method解决singleton bean依赖prototype bean的问题

    在Spring里面,当一个singleton bean依赖一个prototype bean,那么,因为singleton bean是单例的,因此prototype bean在singleton bea ...