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. oracle(五)tkprof 使用 transient kernal profile 侧面 轮廓

    1.show parameter sql_trace value是false表示系统当前不会产生trace文件 2.使产生trace文件 alter session set sql_trace = t ...

  2. Linux 线程实现机制分析 Linux 线程模型的比较：LinuxThreads 和 NPTL

    Linux 线程实现机制分析 Linux 线程实现机制分析  Linux 线程模型的比较:LinuxThreads 和 NPTL http://www.ibm.com/developerworks/c ...

  3. 在ios上时间无法parse返回 "Invalid Date"

    百度搜索:" ios 上面 new date" 关键字 BUG 描述直接上原码 var psrseDate = Date.parse("2010-03-15 10:30: ...

  4. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. [vue]v-bind: sytle/class-bind&属性值绑定

    v-bind - style绑定 - class绑定 - 属性值绑定 <!DOCTYPE html> <html lang="en"> <head&g ...

  6. openssl version 查看openssl 版本出现openssl: error while loading shared libraries: libssl.so.1.1: cannot open shared object file: No such file or directory,怎么办

    查看openssl版本, 解决办法: ln -s /usr/local/lib64/libssl.so.1.1 /usr/lib64/libssl.so.1.1 ln -s /usr/local/li ...

  7. CloudFlare CDN折腾记－优化设置

    近期又在折腾了,常访问我博客的朋友或许页面曾出现过502错误提示,那是折腾CloudFlare CDN不成功的提示.在此先感谢坛子,在他的执着和求真之下,昨天晚上终于成功使用上CloudFlare C ...

  8. CodeForces - 946D Timetable (分组背包+思维)

    题意 n天的课程,每天有m个时间单位.若时间i和j都有课,那么要在学校待\(j-i+1\)个时间.现在最多能翘k节课,问最少能在学校待多少时间. 分析 将一天的内容视作一个背包的组,可以预处理出该天内 ...

  9. python excel操作单元格复制和读取的两种方法

    操作单元格 新建一个sheet, 单元格赋值(两种方法) 单元格A1赋值为’xiaxiaoxu’ 单元格A2赋值为‘xufengchai’ 打印A1和A2单元格的值(两种方法) #coding=utf ...

  10. DNS视图及压力测试（四）

    Bind安全控制选项 Allow-transfer {}; #用于控制区域传送文件 Allow-query {}; #通常用于服务器是缓存名称服务器时,控制查询客户端 Allow-recursion ...