webpack笔记

webpack

• 目录结构 （一个vue打包项目）

|-- demo01    
    |-- dist
        |-- bundle.js         
    |-- src 
        |-- components //文件
        |-- main.js     
        |-- router.js     
        |-- app.vue
    |-- index.html    
    |-- webpack.config.js    

一、安装

全局安装

npm i -g webpack

本地安装

npm install --save-dev webpack

• 核心依赖包–save
  开发工具依赖–save-dev
  我们需要的是打包的结果 而不是这个工具
• 装到项目中 可以防止电脑无webpack情况

npm run node ./src/a.js
npm node ./src/main.js  //main中引用了a
npm run webpack  //打包
npm run webpack --watch //实时编译

//也可以在package json文件scripts直接配置
"scirpts":{
    "build": "webpack", //打包
    "wacth-build":" webpack --watch" //实时编译   
}

二、打包文件

2.1 进入路径打包

cd demo01 目录
webpack js\main.js js\bundle.js

• 在html里无法脚本引用 main.js来显示页面 但引用bundle.js就可以
• 推荐目录结构如demo02 将src（source源码）打包到dist（destination目标）中

2.2 配置文件打包

• 在根目录下新建文件webpack.config.js

//导出一个具有特殊属性配置的对象
const path = require("path");

module.exports ={
    entry:"./src/main.js",
    output: {
       path:path.join(__dirname,"./dist/"),//path必须是绝对路径
       filename:"bundle.js"
    }
}

• 进入根目录直接 webpack 自动根据配置打包

三、加载资源

• webpack是打包js文件

3.1加载css

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

//在webpack.config.js文件中
module.exports ={
    entry:"./src/main.js",
    output: {
       path:path.join(__dirname,"./dist/"),//path必须是绝对路径
       filename:"bundle.js"
    },
    module:{
        rules:[
            {
                test: /.css$/,
                use:[
                   "style-loader",
                    "css-loader"   //顺序不要变
                ]
            }
        ]
    }
}

3.2 加载图片

npm install --save-dev file-loader

//在webpack.config.js文件中
 {
              test: /.(jpg|png|gif|svg)$/,
              use: [
                "file-loader"
              ]
       
}

• 将图片打包到bundle.js所在目录（dist）

3.3 html自动引入

• 这样 bundle.js文件改名了也能够自动修改

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

//在webpack.config.js文件中
var htmlWebpackPlugin = require("html-webpack-plugin");
plugins:[
       new htmlWebpackPlugin({
           template: "./index.html"
       })
]

3.4 加载less

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

• less-loader依赖less less也要装进来

//在webpack.config.js文件中
{
        test: /.less$/,
        use: [
            "style-loader",//3.根据模块生成style节点插入head
            "css-loader", //2.再把css转成javascript文件
            "less-loader" //1.先把less转成css
        ]
         
}

3.5 自动打包实时编译

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

//在webpack.config.js文件中
devServer: {
         contentBase: './dist'
    }

//在package.json文件中
"scirpts":{
    "dev": "webpack-dev-server --open"
}

npm run dev

3.6 es6转es5

3.6.1 babel

• 转es5是为了让浏览器兼容

npm install --save-dev babel-loader babel-core babel-preset-env 

module: {
  rules: [
    {
      test: /\.js$/,  
      exclude: /(node_modules|bower_components)/,//不转换node_modules里的模块
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

3.6.2 babel-polyfill

• 默认转es6中的语法 不转换api 使用polyfill（踮脚片）

npm install --save-dev babel-polyfill

module.exports = {
  entry: ["@babel/polyfill", "./src/main.js"],//后面路径为原入口
};

3.6.3 transform-runtime

• 解决代码重复的问题 打包体积过大

npm install babel-plugin-transform-runtime --save-dev 
npm install babel-runtime --save

rules: [
  // 'transform-runtime' 插件告诉 babel 要引用 runtime 来代替注入。
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['env'],
        plugins: ['transform-runtime']
      }
    }
  }
]

3.7 vue单文件组件打包

npm install --save-dev vue-loader vue-template-compiler

{
      test: /\.vue$/,  
      use: [
         "vue-loader"  //只有一个可以不写对象
      ]
}

3.8 提升编译事件

//不需要npm了 直接识别.js 在use里面的options配置 会在node_modules/.cache里缓存
options: {
        presets: ['env'],
        plugins: ['transform-runtime'],
        cacheDirector: true
    
      }