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 type="text/javascript" src="public/js/jquery.min.js"></script>

    <script type="text/javascript" src="public/js/index.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

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 实时刷新监控的目录

        jq:['jquery'] //这是个多入口，可以写多个依赖的库，例如jq:['jquery','react'],这里引用了就不用在index.js里面用require或者用es6 import引用

    },

    output: {

        path: __dirname + "/public/",

        filename: "js/index.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

        }),

             // 声明jquery为全局变量（不建议使用，会污染，知道这个写法就好） ,在多个文件打包时声明全局变量会影响到代码的重叠，因为全局

            // new webpack.ProvidePlugin({

             //        $:'jquery'

             //    }),

              // 拆分插件

        new webpack.optimize.CommonsChunkPlugin({

            name:'jq', // 上面入口定义的节点组

            filename:'js/jquery.min.js' //最后生成的文件名，生成的位置和引用的位置同目录 与上面的jq['jquery','react']不同这是一个单出口

        })
 　　　//第二种写法　new webpack.optimize.CommonsChunkPlugin('jq', 'js/jquery.min.js' ) 
　　　 //还有一种就是什么都不写，只在entry:入口加一个入口文件（ jq:['jquery']）就可以
] }

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"

  }

}

3、CommonChunkPlugin提取公共js-以提取一个jquery为例的更多相关文章

  1. webpack提取公共js代码

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

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

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

  3. jQuery 对AMD的支持（Require.js中如何使用jQuery）

    AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格 ...

  4. 4、CommonChunkPlugin提取公共js-提取多个

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

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

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

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

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

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

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

  8. 基于webpack实现多html页面开发框架六 提取公共代码

    一.解决什么问题 1.如果a.js和b.js都引用了common.js,那在打包的时候common.js会被重复打入到a.js和b.js,造成重复打包 2.单独打包common.js对性能有帮助,浏览 ...

  9. springcloud config 提取公共参数

    每个微服务都有自己的配置文件application-local.yml和bootstrap.yml, 这个两个配置文件的读取顺序是先读取bootstrap.yml文件,在读取application-l ...

随机推荐

  1. sql批量修改wordpress文章发布时间

    有时为了体现wordpress文章的更新程度,会在后台那边重新设置发布时间,有没更简单的方法呢?用sql批量修改wordpress文章发布时间怎么操作呢? UPDATE `wp_posts` SET ...

  2. Celery配置Redis数据库保存Return结果状态

    使用windows版本 1.于GitHUB下载https://github.com/ServiceStack/redis-windows Window版本,到路径: 2. 运行路径下:D:\redis ...

  3. redis 在windows 上面的安装和使用，集群搭建

    redis作为nosql数据库,将数据存储到内存中(缓存),具有非常高的性能.下面讲解一下redis的安装及java api的使用. 1:redis 安装 windows 上面直接下载msi文件,安装 ...

  4. 支持向量机（SVM）、支持向量回归（SVR）

    1.支持向量机( SVM )是一种比较好的实现了结构风险最小化思想的方法.它的机器学习策略是结构风险最小化原则 为了最小化期望风险,应同时最小化经验风险和置信范围) 支持向量机方法的基本思想: ( 1 ...

  5. python+requests接口自动化完整项目设计源码（一）

    原文地址https://www.cnblogs.com/yoyoketang/tag/python接口自动化/ 原文地址https://www.cnblogs.com/yoyoketang/ 原文地址 ...

  6. Lintcode: First Position of Target (Binary Search)

    Binary search is a famous question in algorithm. For a given sorted array (ascending order) and a ta ...

  7. 关于 WebBrowser调用百度地图API 鼠标滚轮缩放地图级别失灵的解决办法

    在桌面程序下 百度地图API的鼠标缩放地图功能可能会失灵无效! 这个原因不是API的问题 小弟试了下在WEB上面是没有问题的 于是考虑可能是WebBrowser的获取焦点问题,于是在主窗体 添加了一个 ...

  8. js自执行函数的常见写法

    js自执行函数的常见写法 2016-12-20 20:02:26 1.关于自执行函数 1.1 写自执行函数的好处:独立的作用域,不会污染全局环境 (function() { })(); 1.2 理解重 ...

  9. mysql重做日志

    一.重做日志(redo log) 1.作用 确保事务的持久性. 防止在发生故障的时间点,尚有脏页未写入磁盘,在重启mysql服务的时候,根据redo log进行重做,从而达到事务的持久性这一特性. 2 ...

  10. mysql5.7服务器The innodb_system data file 'ibdata1' must be writable导致无法启动服务器

    现象如下:The innodb_system data file 'ibdata1' must be writable. 解决方案如下: 1.关闭mysqld进程: 2.删除配置文件中datadir所 ...