初识webpack(一)

webpack入门

目录

一): webpack入门案例

二): 处理css、scss

三): 通过loader单独生成css等文件

四): 通过插件·压缩 js/css 文件

Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中，用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范，可以处理模块间的依赖关系，所以具有更强大的JS模块化的功能，它能对静态资源进行统一的管理以及打包发布。 
作为一款 Grunt和Gulp的替代产品，Webpack受到大多数开发者的喜爱，因为它能够编译打包CSS，做CSS预处理，对JS的方言进行编译，打包图片，代码压缩等等。

与其他的构建工具相比，Webpack具有如下的一些优势：

• 对 CommonJS 、 AMD 、ES6 的语法做了兼容；
• 对 js、css、图片等资源文件都支持打包；
• 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持；
• 有独立的配置文件 webpack.config.js；
• 可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间；
• 支持 SourceUrls 和 SourceMaps，易于调试；
• 具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活;
• webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快       

一)： webpack入门案例 

初始化生成package.json

npm init -y

 

 通过npm 在本地安装 webpack 

npm install webpack -D

 完成之后会发现文件夹下回有一个node_modules 文件夹

 

这个时候还需要安装一个webpack-cli

npm install webpack-cli -D

 并建立这样一个文件目录

 此时我们还要下载一个loadsh依赖文件

npm install loadsh -p

 接下来我们便开始进入正题了

在src 目录下面的index.js 文件中我们随便写入这样一段简单的JavaScript代码

 

然后在根目录下建立一个webpack.config.js 配置文件， webpack.config.js文件通常放在项目的根目录中，它本身也是一个标准的Commonjs规范的模块 ，这个文件名是默认的一般不更改 

通过 npx webpack -h  我们查看帮助便知道原因了

 webpack.config.js是webpack的config文件，作用是告诉webpack如何把你的项目当中的js文件整合成一个并且附加版本号，以及uglify。这里面有 入口配置 entry 出口配置output 

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
 
};

执行

npx webpack

这是我们就会看到dist 目录下面有一个main.js 在同级目录下面的index.js 文件中引入这个main.js 就可以运行了 我们的入门案例也结束了。

二）： 处理css、scss

同样我们在src 目录下建立一个style 文件夹 再建一个 a.css 和一个 a.scss文件写入如下代码

在src/index.js中引入这两个样式 ：

import _ from 'lodash';
import './style/style.css'
import './style/a.scss'

function createEle() {
    let dom = document.createElement('div');
    dom.innerHTML = _.join(['fuck','webpack'],'');
    document.body.appendChild(dom);
}
    createEle();

 我们需要引入style-loader 和 css-loader 和sass-loader

npm install style-loader css-loader -D

npm install sass-loader node-sass -D

 

css-loader:  加载css文件；

style-loader: 使用<style> 将css-loader内部样式注入到我们的html页面

在webpack.config.js中配置如下:

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true//文件定位
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  }
};

加载语法如下 详情可以看官方api文档: 

 

 module: {

     rules: {

          text: "  "

          use:['xxx-loader']

        }

}

最后执行npx webpack就打包完成了。

三): 生成独立的css文件

样式抽离我们需要用到 mini-css-extract-plugin插件

npm install mini-css-extract-plugin -D

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: "./src/index.js",
  mode: "production",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")//css文件的输出位置
  },
  module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
            MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename:  "[name].css",
        chunkFilename: "[id].css"
    })
  ] 
}

 执行npx webpack

四): js/css 的压缩 

压缩css需要用到 optimize-css-assets-webpack-plugin插件

npm install optimize-css-assets-webpack-plugin -D

js压缩需要用到uglifyjs-webpack-plugin插件

npm install uglifyjs-webpack-plugin -D

webpack.config.js 配置如下

const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const optimizeCss = require('optimize-css-assets-webpack-plugin');

module.exports = {
  entry: "./src/index.js",
  mode: "production",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.(sc|c|sa)ss$/,
        use: [
            MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
        filename:  "[name].css",
        chunkFilename: "[id].css"
    })
  ],
  optimization: {
    // minimize: true,
    minimizer: [ 
      new optimizeCss(), 
      new UglifyJSPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      })
    ]
  }
  
}

执行npx webpack