webpack

1.js模块导出,，导入

（1）导出

module.exports

module.exports = function(){
    console.log('我是bar模块');
    
}

（2）导入

require('./bar')

var bar = require('./bar')    //省略.js

bar()

2..js模块导出,，导入默认成员（ES6语法）  默认成员只能导出一个

（1）导出

export default +函数

export default  function(){
    console.log('我是bar模块');    
}

（2）导入

import   模块名  from  '路径'

import bar from './bar'     //省略.js
bar()

（3）对象的导出 导入

export default {
    name:'zhangsan',
    age:19,
    sex:'male'
}

import bar from './bar'
console.log(bar);

 

 3.导入，导出非默认成员（ES6） 可导出多个

（1）导出

export const x = 'zhangsan'
export const y = 'zhaoliu'
export function fn (a,b){
    return a + b
}

export  x = 'zhangsan'   //错误的导出
export 'zhaoliu'       //错误的导出
export function (a,b){ return a + b }   //错误的导出

 

（2）导入

import {x,y,fn} from './bar'
console.log(x,y,fn(10,50));

import * as bar from './bar'    //一次性导入所有成员
console.log(bar);

 

4.配置package.json  的scripts字段  （命令映射）

"scripts": {
   "show":"webpack -v" ,   
   "build":"webpack",              
   "watch":"webpack --watch"      //当有数据更新时，自动打包
   "start":"node ./src/main.js"

  }

    

 

5.webpack 打包

 webpack  ./main.js  -o  ./db.js  

./main.js  为需要打包的js文件

./db.js   打包或的js文件

6.配置webpack.config.js  设置入口和出口

const path = require('path');
module.exports = {
  entry: './src/main.js',
  output: {
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  }
};

8.webpack安装

（1）安装在本地   开发版 

webpack

npm i -D webpack@v4.35.2

（2）安装webpack-cli

npm i -D webpack-cli

 9.webpack打包css

（1）安装

npm i -D css-loader style-loader

（2）配置webpack.config.js

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

（3）css文件引入   

import '路径'

import './style.css'

10.webpack 打包图片

（1）安装

npm i -D file-loader

（2）配置webpack.config.js

module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  }

 11.设定 HtmlWebpackPlugin    引入index.html   ，自动引入index页面中的js文件

（1）安装

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

（2）配置webpack.config.js

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

 
 plugins: [
   new HtmlWebpackPlugin({
    template:'./index.html'
  })
  ]

 12.设置 webpack-dev-server

（1）安装

npm install --save-dev webpack-dev-server

（2）配置webpack.config.js

devServer: {
    contentBase: "./dist"
  },

（3）配置package.json的的scripts字段  （命令映射）

"dev":"webpack-dev-server --open"

13.Babel 将ES6转化成ES5，解决浏览器的兼容问题

（1）安装

npm install -D babel-loader @babel/core @babel/preset-env

（2）配置webpack.config.js

 {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }

14.热模块加载

配置webpack.config.js

 const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
+ const webpack = require('webpack');

  module.exports = {
    entry: {
-      app: './src/index.js',
-      print: './src/print.js'
+      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
+     hot: true
    },
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
+     new webpack.NamedModulesPlugin(),
+     new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };