cnpm install css-loader --save-dev    //css-loader 是将css打包进js

cnpm install style-loader --save-dev  //style-loader 将css通过require方式引入进来

cnpm install sass-loader node-sass  --save-dev //同时安装sass 和sass-loader

cnpm install extract-text-webpack-plugin --save-dev //把css从js中提取出来

目录结构(publi为src编译生成的文件)

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<link rel="stylesheet" type="text/css" href="public/css/index.css" />
<body>
<div id="app">6r</div>
<p id="demo">456</p>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="public/js/index.js"></script>
<script type="text/javascript" src="public/js/b.js"></script>
<script type="text/javascript" src="public/js/a.js"></script>
<script type="text/javascript" src="public/js/ab.js"></script> <!-- assets是通过publicPath虚构出来的暂存空间,它不直接在硬盘内存中,通过webpack-dev-server来运行 -->
</html>

index.scss

$col:pink;
@import "./demo"; //导入css
body{
font-size: 900%;
#app{color:$col;}
}

demo.css

  #demo{color:blue;}

index.js

//loader-css
require("../css/index.scss"); $('#app').html("1334");
$("#app").click(function(event){
alert(123)
});

webpack.config.js

var webpack = require("webpack");
var webpckDevServer = require("webpack-dev-server");
var ExtractTextPlugin = require('extract-text-webpack-plugin'); //抽离css插件
var extractCss = new ExtractTextPlugin("css/index.css"); //实例化,并并填写输出的一个路径[]中表示输出默认名称,这个目录相对于提出的那个目录
module.exports = {
entry:{
index:__dirname + "/src/js/index.js",//入口文件 webpack-dev-server 实时刷新监控的目录
ab:[__dirname +"/src/js/a.js",__dirname +"/src/js/b.js"], //输出后是一个总的ab,他们两个也会分别的被输出,引用顺序先b.js然后其他两个不分顺序
jq:['jquery'] //这是个多入口,可以写多个依赖的库,例如jq:['jquery','react'],这里引用了就不用在index.js里面用require或者用es6 import引用
},
output: {
path: __dirname + "/public/",
filename: "js/[name].js",
publicPath: '/assets/' //打开webpack-dev-server 服务器工具时可以再index里面引用此地址,打开速度会快一点,另外他不是直接在内存中存放而是先在webpack的虚拟内存中暂存,所以在webpack未编译之前能够运行,如果直接写实体目录则不经过webpack打包编译,浏览器是识别不了的,所以先放在这个虚拟目录里,因为是虚拟目录,所以你看不到他的编译文件
},
devServer: {
contentBase: "./",
//根目录
host: '192.168.199.171',
//ip设置 要相对的进行改变
port: "80",
//端口
colors: true,
open: true //自动打开浏览器
},
module: {
loaders: [{
test: /\.css$/,
//匹配.css文件
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css!sass")
}]
},
plugins: [
extractCss,
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
} //自动压缩js,css
}),
new webpack.optimize.CommonsChunkPlugin({
names:['a','b'] // 上面入口定义的节点组 ,不这样上面的ab会集合在一个ab.js中,而不会从里面提取出来
}) ] }

package.json

{
"name": "webp2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"www": "cnpm run demo && cnpm run devServer",
"demo": "webpack --watch --progress -d -p --color",
"demo2": "webpack --config webpack.config123.js --watch --progress -d -p --color",
"start": "webpack --watch --progress -d -p --color",
"devServer": "webpack-dev-server --inline --hot"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"jquery": "^3.1.1",
"node-sass": "^4.0.0",
"sass-loader": "^4.1.0",
"style-loader": "^0.13.1",
"uglify-js": "^2.7.5",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}

4、CommonChunkPlugin提取公共js-提取多个的更多相关文章

  1. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  2. 3、CommonChunkPlugin提取公共js-以提取一个jquery为例

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...

  3. 记webpack下提取公共js代码的方法

    环境: webpack4.6 + html-webpack-plugin 多页面多入口 经多次研究,稍微靠谱可用的配置 optimization: { splitChunks: { minSize: ...

  4. webpack学习笔记--提取公共代码

    为什么需要提取公共代码 大型网站通常会由多个页面组成,每个页面都是一个独立的单页应用. 但由于所有页面都采用同样的技术栈,以及使用同一套样式代码,这导致这些页面之间有很多相同的代码. 如果每个页面的代 ...

  5. [转] 用webpack的CommonsChunkPlugin提取公共代码的3种方式

    方式一,传入字符串参数 new webpack.optimize.CommonsChunkPlugin(‘common.js’), // 默认会把所有入口节点的公共代码提取出来,生成一个common. ...

  6. webpack4 系列教程(三): 多页面解决方案--提取公共代码

    这节课讲解webpack4打包多页面应用过程中的提取公共代码部分.相比于webpack3,4.0版本用optimization.splitChunks配置替换了3.0版本的CommonsChunkPl ...

  7. 详解用webpack的CommonsChunkPlugin提取公共代码的3种方式(注意webpack4.0版本已不存在)

    Webpack 的 CommonsChunkPlugin 插件,负责将多次被使用的 JS 模块打包在一起. CommonsChunkPlugin 能解决的问题 在使用插件前,考虑几个问题: 对哪些 c ...

  8. browserify 不打包某些文件或者把公共文件提取出来教程

    var gulp = require('gulp') var fs = require("fs") var babelify = require('babelify') var b ...

  9. webpack配置提取公共代码

    公共代码提取功能是针对多入口文件的: 背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js webpack.config.js文件: var path = ...

  10. webpack优化之玩转代码分割和公共代码提取

    前言 开发多页应用的时候,如果不对webpack打包进行优化,当某个模块被多个入口模块引用时,它就会被打包多次(在最终打包出来的某几个文件里,它们都会有一份相同的代码).当项目业务越来越复杂,打包出来 ...

随机推荐

  1. hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

  2. 第四课:通过配置文件获取对象(Spring框架中的IOC和DI的底层就是基于这样的机制)

    首先在D盘创建一个文件hero.txt,内容为:com.hero.Hero(此处必须是Hero的完整路径) 接下来是Hero类 package com.hero; public class Hero ...

  3. 理解SQL Server中索引的概念,原理

    转自:http://www.cnblogs.com/CareySon/archive/2011/12/22/2297568.html 简介 在SQL Server中,索引是一种增强式的存在,这意味着, ...

  4. 总结)Nginx/LVS/HAProxy负载均衡软件的优缺点详解

    总结)Nginx/LVS/HAProxy负载均衡软件的优缺点详解 PS:Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使 ...

  5. 2F+1模式才是高可用 途牛旅游网 还是通过proxy层

    2F+1模式才是高可用 途牛旅游网 还是通过proxy层 f f f f f f f f f

  6. fish shell 下gopath的设置问题

    GOPATH可以设置多个工程目录,linux下用冒号分隔(必须用冒号,fish shell的空格分割会出错),windows下用分号分隔,但是go get 只会下载pkg到第一个目录,但是编译的时候会 ...

  7. java注解使用

    1:定义注解 package chapter20.one; import java.lang.annotation.ElementType; import java.lang.annotation.R ...

  8. [py]处理文件的3个方法

    file处理的3个方法: f和f.readlines效果一样 # f.read() 所有行 -> 字符串 # f.readline 读取一行 -> 字符串 # f.readlines 所有 ...

  9. 【Win7 x64】+【annaconda3】+ 【python3.5.2】+【tensorflow-gpu】 [最终配置 gtx 940mx + Cuda8.0+cudnn v5.1 + tensorflow-gpu1.0.0 ]

    1.安装cuda Toolkit 和cudnn (百度云可下载,版本需要对应) 2.配置环境变量: 3.安装cudnn(需要拷贝一些dll和lib来进行配置) 4.进入cmd,找到anaconda3的 ...

  10. Summary: difference between public, default, protected, and private key words

    According to Java Tutorial: Controlling Access to Members of a Class Access level modifiers determin ...