webpak打包css之最全的简单入门

上篇文章了解了怎么去配置以及运行webpack，可是因为简单的打包js，有时候咱们有不少css文件须要去打包，这个怎么办呢？不用着急，这边文章就是来一块儿学习怎么去简单的打包css文件。

配置webpack环境

首先建立空文件夹经过命令全局安装webpack（若是你已经全局安装过webpack，能够直接进行下一步初始化根目录）

//全局安装
npm install -g webpack
//或者--淘宝镜像，速度比较快
cnpm install -g webpack

其次初始化你的文件根目录而且安装依赖

npm init  //根目录初始化
npm install --save-dev webpack // 安装Webpack

而后建立你的项目

eg：在根文件夹下建立一个src文件夹，src文件夹里面能够放入你的源代码js，css等
    一样根目录下建立一个public文件夹，里面放入你的html文件它在这里目的在于引入打包后的js文件，这里咱们先把       以后打包后的js文件命名为bundle.js

根目录下建立并配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript执行入口文件,
  entry:'./src/js/main.js',
  //须要指定一下输出的路径path和输出的文件名filename
  output:{
    filename:'bundle.js',   //自定义输出文件名
    path:path.resolve(__dirname,'./public/js')  //自定义输出文件所在目录
  },
  //设置mode
   mode: 'development' // 设置mode
}

Loader

基本环境配置好后，因为webpack自己只能处理 JavaScript 模块，若是要处理其余类型的文件，就须要使用 loader 进行转换。不能够直接打包css，因此咱们须要使用到 css-loader 和 style-loader。，他们作两件不一样的事情，css-loader 会遍历 CSS 文件，而后找到 url() 表达式而后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

安装 css-loader 和 style-loader(全局安装须要参数 -g)。

cnpm install  css-loader  style-loader

执行以上命令后，会再当前目录生成 node_modules 目录，它就是 css-loader 和 style-loader 的安装目录。

接下来在src文件夹下的css文件夹里建立一个index.css文件

body{
  background: red;
}

同时配置入口文件main.js

require("!style-loader!css-loader!../css/index.css");//这个就是配置的css文件
document.write("Hello World!");

而后在根目录下运行webpack

webpack

输出成功后，打开你的html文件，便可看到带有css的打包过的项目！

配置文件

require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!，这样有些麻烦，咱们能够经过配置文件来方便操做。

首先更改require CSS方式：

require("../css/index.css");

而后配置webpack.config.js文件

const path=require('path');
module.exports={
  //JavaScript执行入口文件,
  entry:'./src/js/main.js',
  //须要指定一下输出的路径path和输出的文件名filename
  output:{
    filename:'bundle.js',   //自定义输出文件名
    path:path.resolve(__dirname,'./public/js')  //自定义输出文件所在目录
  },
  //设置style-loader css-loader
   module:{
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    }, {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

再次运行webpack，你会发现有神奇的效果。

开发环境

项目逐渐变大，webpack 的编译时间会变长，能够经过参数让编译的输出内容带有进度和颜色。

webpack --progress --colors

若是不想每次修改模块后都从新编译，那么能够启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被从新编译，因此监听模式的总体速度是很快的。

webpack --progress --colors --watch

固然，咱们可使用 webpack-dev-server 开发服务，这样咱们就能经过 localhost:8080 启动一个 express 静态资源 web 服务器，而且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 能够浏览项目中的页面和编译后的资源输出，而且经过一个 socket.io 服务实时监听它们的变化并自动刷新页面。

//安装
cnpm install webpack-dev-server -g
//运行
webpack-dev-server --progress --colors

在浏览器打开 http://localhost:8080/ 输出结果以下：

进入到相对应的文件打开你的项目