webpack3.X 学习day3 （模块：打包）

1.模块：css打包

    （配置loaders）

简单的举几个Loaders使用例子：

• 能够把SASS文件的写法转换成CSS，而不在使用其余转换工具。
• 能够把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
• 能够把React中的JSX转换成JavaScript代码。

注意：全部的Loaders都须要在npm中单独进行安装，并在webpack.config.js里进行配置。下面咱们对Loaders的配置型简单梳理一下。

• test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
• use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，不然报错；
• include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不须要处理的文件（文件夹）（可选）；
• query：为loaders提供额外的设置选项（可选）。

    打包css

    1.建立css（在src路径下建立css文件，在文件内建立index.css）

    路径(src/css/index.css)

body{
    background-color: red;
    color: #fff;
}

    css创建后，须要引用到入口文件中，才能够打包到，这里咱们引入到entry.js中

    2.引入css（在entry.js中引入）

    路径(src/entry.js)

import css from './css/index.css';

    如图

    

    3.npm安装（style-loader;css-loader）

    style-loader(处理css文件中的url()等)

    安装【cnpm install style-loader --save-dev】

    css-loader(用于将css朝如到页面的style标签)

    安装【npm install --save-dev css-loader】

    安装好后配置loaders

    4.loaders配置（webpack.config.js中配置）

    路径(webpack.config.js)

module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },

    如图

    tip:loader的还有两种配置方法

//第二种   
   module:{
        rules:[
            {
                test:/\.css$/,
                loader:['style-loader','css-loader']
            }
        ]
    },

//第三种 
   module:{
        rules:[
            {
                test:/\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    },

    4.css打包完成

    测试一下【npm run resvers】

    tip:npm run resvers是在（package.json）配置的，在day2中，如图

 

2.插件配置：配置JS压缩

    tip:须要引入一个uglifyjs-webpack-plugin(JS压缩插件，简称uglify)

        (虽然uglifyjs是插件，可是webpack版本里默认已经集成，不须要再次安装)

    1.引入

    路径(webpack.config.js)

const uglify = require('uglifyjs-webpack-plugin');

    如图

    

    2.初始化对象

    引入后在plugins配置里new一个 uglify对象就

//plugins 用来配置插件
plugins:[
        new uglify()
    ],

    3.终端中打包【npm start】

    【npm start】是在（package.json）配置的，在day2中

    4.js压缩打包完成

———————————————————以上是今天的学习内容——————————————

不积跬步无以致千里