webpack使用-上

webpack

https://webpack.docschina.org/

webpack 是node的第三方模块包，用于打包代码

webpack是一个现代JavaScript应用程序的静态模块打包器（module bundler）

把很多文件打包整合到一起，缩小项目体积，提高加载速度

功能：

less/sass ——> css

ES6/7/8 ——–>ES5

html/css/js——>压缩合并

基础使用

默认的入口文件 ./src/index.js 默认出口文件 ./dist/main.js

• 初始化包环境

  yarn init
  

• 安装依赖包

  yarn add webpack webpack-cli -D
  

• package.json配置scripts(自定义命令)

  "scripts": {
      "build": "webpack"
  },
  

• 项目目录下新建 src/add/index.js

  export const addFn = (a, b) => a + b
  

• 项目目录下新建 src/index.js

  import { addFn } from './add'
  console.log(addFn(4, 5))
  

• 项目目录下打开命令窗口，运行打包命令

  yarn build
  or
  npm run build
  

  总结：打包命令执行后，在项目目录下生成默认的dist目录和打包后默认的main.js文件

• 代码变更，重新打包

  • 新建src/tool/index.js

    export const getArrSum = (arr) =>
      arr.reducw((sum, val) => {
        sum += val
      }, 0)
    
    

  • 更改src/index.js代码

    import { addFn } from './add'
    import { getArrSum } from './tool'
    console.log(addFn(4, 5))
    console.log(getArrSum([1, 2, 3, 4]))
    console.log(addFn(5, 6))
    

  • 运行打包命令

    yarn build
    

    总结：打包后，代码压缩，变量压缩

webpack配置

如何指定webpack的入口和出口

• 项目目录下，新建webpack.config.js
• 填写配置项

const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
}

打包隔行变色项目

• 前面的步骤

• 下载jquery，项目目录下新建public/index.html

• src/main.js

  import { addFn } from './add'
  import { getArrSum } from './tool'
  import $ from 'jquery'
  console.log(addFn(4, 5))
  console.log(getArrSum([1, 2, 3, 4]))
  console.log(addFn(5, 6))
  $(function () {
    $('#app li:nth-child(odd)').css('color', 'red')
    $('#app li:nth-child(even)').css('color', 'blue')
  })
  

• 执行打包命令

• 把public以及他的html文件复制到dist目录下

• 在index.html文件中手动引入打包后的build.js

自动生成html文件

webpack只能打包js文件，插件HtmlWebpackPlugin 简化了 HTML 文件的创建

该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle

• 安装

  npm install --save-dev html-webpack-plugin
  

• webpack.config.js中配置

  const HtmlWebpackPlugin = require('html-webpack-plugin')
  const path = require('path')
  
  module.exports = {
    entry: './src/main.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'build.js',
    },
    plugins: [new HtmlWebpackPlugin()],
  }
  

  打包后，dist目录下就多了html文件，还自动把打包的bundle.js文件通过script引入

处理css文件–加载器

webpack 默认只认识js文件和json文件

• src/css/index.css给body添加背景颜色
• 把css文件引入到入口文件 被webpack打包
• loader加载器，让webpack处理其他类型的文件，打包到js中

下载

npm install --save-dev style-loader css-loader

webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
  plugins: [new HtmlWebpackPlugin()],
  module: {
    rules: [
      //loader的规则
      {
        test: /\.css$/i, //匹配所有的css文件
        // use数组中从右往左运行
        // 先用css-loader让webpack识别css文件的内容打包
        // style-loader 把css插入到dom中
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
}

处理less文件

安装

npm install less less-loader --save-dev

webpac配置

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'build.js',
  },
  plugins: [new HtmlWebpackPlugin({
      // 以此为标准 生成打包后的html文件
      template: './public/index.html',
    })],
  module: {
    rules: [
      //loader的规则
      {
        test: /\.css$/i, //匹配所有的css文件
        // use数组中从右往左运行
        // 先用css-loader让webpack识别css文件的内容打包
        // style-loader 把css插入到dom中
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.less$/i, //匹配所有的less文件
        use: [
          // 从右往左运行
          // compiles Less to CSS
          // less-loader让webpack处理less文件，会用less翻译less代码转换成css代码
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
}

src目录下新建less/index.less

入口main.js中引入less文件

打包

原文地址：http://www.cnblogs.com/wmdaixuexi/p/16828950.html