webpack分别css单独打包

用run dev
build打包后,发现样式改变了,最终发现addAdress.vue和myAdress.vue中的有个类名是相同的,但是想着

1、安装

1、安装

1、webpack打包默认配置文件webpack.config.js

CreateTime:2016-05-17 11:55
UpdateTime:2016-09-02 16:35

<style scoped></style>
npm install extract-text-webpack-plugin --save-dev
npm install extract-text-webpack-plugin --save-dev

2、打包js文件:奥门威尼斯人游戏,有这个文件并配置可以直接在cmd上webpack打包,没有这个文件要在cmd上输入
webpack main.js build.js

由于早起的文章不是用markdown写的,现在修改起来比较麻烦。
因此重新写了一篇
由于这篇文章只写了如何把CSS打包成一个CSS文件,没有讲解如何打包成多个CSS文件,经简友提点,这里添加上了
打包成多个CSS文件的方法。

在style标签上添加scoped属性,就表示它的样式作用于当下的模块,样式私有化的目的就不会相互污染啊!为什么打包后会出现这样的结果呢!不太理解!

 

 

3、打包css文件:要在cmd上输入npm install style-loader css-loader
安装


一.css样式发生改变

2、项目目录:

2、项目目录:

module.exports={
    //配置js
    entry:'./main.js',//webpack要打包的源文件
    output:{
        filename:'build.js'//打包输出的文件名称
    },
    module:{
        loaders:[
            {
                test:/\.css$/,      //配置css
                loader:'style-loader!css-loader'
            },
            {
                test: /\.(png|jpg)$/,   //配置css中的图片,html中的图片示例在下面
                loader: 'url-loader?limit=8192'//图片被打包在主目录下
            }
        ]
    }
};

威尼斯娱乐棋牌,瞎扯

webpack 把所有的资源都当成了一个模块, CSS,Image, JS 字体文件 都是资源,
都可以打包到一个 bundle.js 文件中.
但是有时候需要把样式 单独的打包成一个文件, 然后放到 CND上,
然后缓存到浏览器客户端中


<style scoped>的scoped属性:

威尼斯娱乐棋牌 1

威尼斯娱乐棋牌 1

url-loader 后面除了 limit 字段,还可以通过 name
字段来指定图片打包的目录与文件名:

一、extract-text-webpack-plugin 使用方法

这个操作很简单的,只需要一个插件就好了,就是extract-text-webpack-plugin

1)加了scoped属性的组件,可以维护当前组件样式不受其它组件影响

index文件夹下的index.css:

index文件夹下的index.css:

module: {
  loaders: [
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'//图片被打包在images目录下并在原图片名前加上8位 hash 值
    }
  ]
}

1. 安装extract-text-webpack-plugin

npm install extract-text-webpack-plugin --save-dev

2)加了scoped属性的父级组件,不能修改子组件元素样式(无路子组件加没属性scoped,因为scoped只能维护当前组件元素)

body{
    background-color: #ccc;
}
.flex-div{
    display: flex;
}
body{
    background-color: #ccc;
}
.flex-div{
    display: flex;
}

上例中的 name 字段指定了在打包根目录(output.path)下生成名为 images
的文件夹,并在原图片名前加上8位 hash 值。

2. 配置文件添加对应配置

首先require一下

var ExtractTextPlugin = require("extract-text-webpack-plugin");

plugins里面添加

new ExtractTextPlugin("styles.css"),

实例:

plugins:  [
      new webpack.optimize.CommonsChunkPlugin('common.js'),
      new ExtractTextPlugin("styles.css"),  
],

modules里面对css的处理修改为

{
    test: /\.css$/,
     loader:  ExtractTextPlugin.extract("style-loader","css-loader")
},

千万不要重复了,不然会不起作用的

我这里如下:

module:  {
      loaders:  [
            {
            test: /\.css$/,
             loader:  ExtractTextPlugin.extract("style-loader","css-loader")
        },
            {
            test:  /\.scss$/,
             loader:  "style!css!sass"
        },
            {
            test:  /\.less$/,
             loader:  "style!css!less"
        },
    ]
},

3)不加scoped属性的父级组件,可以修改子组件样式

index文件夹下的index2.css:

index文件夹下的index2.css:

css 文件和 images
文件夹保持了同样的层级,可以不做任务修改即能访问到图片。区别是打包后的图片加了
hash 值,bundle.css 文件里引入的也是有hash值的图片。

3. 在引入文件里面添加需要的css,【举例如下】

require('../less/app.less');
require('./bower_components/bootstrap-select/dist/css/bootstrap-select.min.css');
require('./bower_components/fancybox/source/jquery.fancybox.css');

4)加了scoped属性的父级组件,也可以强行控制加了scoped属性的子组件,方法是:.a
>>> .b或者css预处理中的 .a /deep/

p{
    text-indent: 2em;
}
p{
    text-indent: 2em;
}

output.publicPath
表示资源的发布地址,当配置过该属性后,打包文件中所有通过相对路径引用的资源都会被配置的路径所替换。

二、如何把CSS打包成一个文件, 和 把CSS打包成多个文件

打包一个文件,只需要常规的在入口的js文件引用 css文件即可,
打包成多个CSS文件,可以设置多个CSS入口,让webpack用 loader去打包。
和分割单独打包js文件一样。下面有两个例子。【例子来源】

//  使用webpack 打包单独的postcss语法的css文件
/*   webpack.config.js   */
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
module.exports = {
    entry: './【path】/index.js',
    /*  index.js 里  require('./【name】.css');就好  我在看看文档是不是直接不用引入js文件 */
    output: {
      filename: 'index.js'
    },
    module: {
      loaders: [{
        test: /\.css$/,
        loader: Ex.extract('style-loader', 'css-loader!postcss-loader') /*这里的写法注意下 */
      }]
    },
    postcss: function() {
      return [autoprefixer, cssnext, precss, cssnano]
    },
    plugins: [
      new Ex("【name】.css")
    ]
  }
  //////////////////////////////////////////////////////////////////////////////////////
  //////////////////////////////////////////////////////////////////////////////////////
  //  使用webpack 打包单独的多个postcss语法的css文件
var precss = require('precss');
var cssnext = require('cssnext');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
var Ex = require('extract-text-webpack-plugin');
var webpack = require('webpack');


module.exports = {
  entry: {
    ac1: './src/actother.css',
    ac2: './src/index.css'
  },
  output: {
    filename: "[name].css"
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: Ex.extract('style-loader', 'css-loader!postcss-loader')
    }]
  },
  postcss: function() {
    return [autoprefixer, precss, cssnano, cssnext]
  },
  plugins: [
    new Ex('[name].css')
  ]
}

二.css样式不起作用

index文件夹下的index-less.less:

index文件夹下的index-less.less:

output: {
  path: 'dist',   //主目录
  publicPath: '/assets/',  //替换的路径
  filename: 'bulid.js'
}

原因:

.layer{
    width: 600px;
    height: 200px;
    background-color: green;
    > div{
        width: 400px;
        height: 200px;
        background:url(../../img/ais.jpg);
    }
    .flex{
        display: flex;
    }
}
.layer{
    width: 600px;
    height: 200px;
    background-color: green;
    > div{
        width: 400px;
        height: 200px;
        background:url(../../img/ais.jpg);
    }
    .flex{
        display: flex;
    }
}

4、打包图片:打包图片有三种,html中的图片,css中的图片,js中的图片,在
webpack 中引入图片需要依赖 url-loader 这个加载器。npm install url-loader
–save-dev,如果缺少file-loader,npm install file-loader –save-dev

1.使用了webpack2的语法规则不正确; webpack2要求必须写-loader;

index文件夹下的index.js:

index文件夹下的index.js:

   test 属性代表可以匹配的图片类型,除了 png、jpg 之外也可以添加 gif
等,以竖线隔开即开。loader 后面 limit
字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成
base64 码引用。

2.可能是只写了css-loader,没有写style-loader;

require('./index-less.less');
require('./index.css');
require('./index2.css');
require('../module.js');
console.log('首页-index文件');
require('./index-less.less');
require('./index.css');
require('./index2.css');
require('../module.js');
console.log('首页-index文件');

      由于 webpack 对 html 的处理不太好,打包 HTML
文件中的图片资源是相对来说最麻烦的。这里需要引用一个插件——
html-withimg-loder $ npm install html-withimg-loader –save-dev

3.顺序反了,必须写成 style-loader!css-loader;

login文件夹下的index.js:

login文件夹下的index.js:

module: {
loaders: [
    {
        test: /\.html$/,
        loader: 'html-withimg-loader'
    }
]
}

注:在 build.js 中引用 html 文件

import '../index.html';

JS中的图片应该是通过模块化的方式引用图片路径

var imgUrl = require('.g.jpg'),
imgTempl = '<img src="'+imgUrl+'" />';
document.body.innerHTML = imgTempl

1)需要引用的分支文件

//配置文件出口
module.exports={
    addFun:add
};

2)需要引用的主文件

require("./com.css");//引入要打包的css文件
var cale=require('./add.js');//引入要打包的js文件
console.log(cale.addFun(1,2));//调用函数方法

没写style-loader则build文件会生成,但你会发现页面中js不起作用;

require('./login.css');
require('../module.js');
console.log('登录页-index文件');
require('./login.css');
require('../module.js');
console.log('登录页-index文件');

 

没写css-loader则会直接报错:’You may need an appropriate loader to
handle this file type.’

login文件夹下的login.css:

login文件夹下的login.css:

注:压缩build.js直接在cmd上输入webpack -p

 

style-loader只是没起作用而不报错就意味着它的作用是将样式插入到DOM元素中;结合网上的答案以及观察预览页面发现:style-loader会在页面的header标签里生成内部的<style></style>;

div{
    margin: 0;
    padding: 0;
}
div{
    margin: 0;
    padding: 0;
}

css-loader
会报错,是因为它影响到webpack的build的过程了。结合网上分享以及’You may
need an appropriate loader to handle this file
type.’报错信息,意味着css-loader的存在使得在js中通过require或者import引入css成功;通过css-loader,可以实现在js文件中通过require的方式,来引入css。

 

 

3、webpack.config.js

3、webpack.config.js

//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//处理共用、通用的js
var webpack = require('webpack');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    //    entry: './src/app.js',
    entry: {
        //通用模块
        'common': ['./src/page/common/index.js'],
        'login': ['./src/page/login/index.js'],
        'index': ['./src/page/index/index.js']
    },
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js'
    },
    //将外部变量或者模块加载进来
    externals: {
        'jquery': 'window.jQuery'
    },
    module: {
        loaders: [{
                test: /\.js$/,
                //以下目录不处理
                exclude: /node_modules/,
                //只处理以下目录
                include: /src/,
                loader: "babel-loader",
                //配置的目标运行环境(environment)自动启用需要的 babel 插件
                query: {
                    presets: ['latest']
                }
            },
            //css 处理这一块
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        //'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                //支持@important引入css
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                        require('postcss-import')(),
                                        require("autoprefixer")({
                                            "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                        })
                                    ]
                                }
                            }
                        }
                    ]
                })
            },
            //less 处理这一块
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        //'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                //支持@important引入css
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                        require('postcss-import')(),
                                        require("autoprefixer")({
                                            "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                        })
                                    ]
                                }
                            }
                        },
                        'less-loader'
                    ]
                })
            },
            //处理html模板
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //处理图片
            {
                test: /\.(png|jpg|gif|svg)$/i,
                loaders: [
                    //小于8k的图片编译为base64,大于10k的图片使用file-loader            
                    'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]',
                    //图片压缩
                    'image-webpack-loader'
                ]

            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        }),
        // 独立通用模块到js/common.js
        new webpack.optimize.CommonsChunkPlugin({
            //公共块的块名称
            name: 'common',
            //生成的文件名
            filename: 'js/common.js'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]
}
//处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin');
//处理共用、通用的js
var webpack = require('webpack');
//css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    //    entry: './src/app.js',
    entry: {
        //通用模块
        'common': ['./src/page/common/index.js'],
        'login': ['./src/page/login/index.js'],
        'index': ['./src/page/index/index.js']
    },
    output: {
        path: __dirname + '/dist',
        filename: 'js/[name].js'
    },
    //将外部变量或者模块加载进来
    externals: {
        'jquery': 'window.jQuery'
    },
    module: {
        loaders: [{
                test: /\.js$/,
                //以下目录不处理
                exclude: /node_modules/,
                //只处理以下目录
                include: /src/,
                loader: "babel-loader",
                //配置的目标运行环境(environment)自动启用需要的 babel 插件
                query: {
                    presets: ['latest']
                }
            },
            //css 处理这一块
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        //'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                //支持@important引入css
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                        require('postcss-import')(),
                                        require("autoprefixer")({
                                            "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                        })
                                    ]
                                }
                            }
                        }
                    ]
                })
            },
            //less 处理这一块
            {
                test: /\.less$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: [
                        //'style-loader',
                        {
                            loader: 'css-loader',
                            options: {
                                //支持@important引入css
                                importLoaders: 1
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                plugins: function() {
                                    return [
                                        //一定要写在require("autoprefixer")前面,否则require("autoprefixer")无效
                                        require('postcss-import')(),
                                        require("autoprefixer")({
                                            "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"]
                                        })
                                    ]
                                }
                            }
                        },
                        'less-loader'
                    ]
                })
            },
            //处理html模板
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader'
                }
            },
            //处理图片
            {
                test: /\.(png|jpg|gif|svg)$/i,
                loaders: [
                    //小于8k的图片编译为base64,大于10k的图片使用file-loader            
                    'url-loader?limit=8192&name:img/[name]-[hash:5].[ext]',
                    //图片压缩
                    'image-webpack-loader'
                ]

            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: 'index.html',
            filename: 'index.html'
        }),
        // 独立通用模块到js/common.js
        new webpack.optimize.CommonsChunkPlugin({
            //公共块的块名称
            name: 'common',
            //生成的文件名
            filename: 'js/common.js'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]
}

 

 

4、执行

4、执行

npm run webpack
npm run webpack

 

 

5、效果

5、效果

威尼斯娱乐棋牌 3

威尼斯娱乐棋牌 3

威尼斯娱乐棋牌 5

威尼斯娱乐棋牌 5

 

 

 

 

相关文章