Webpack 笔记

创建
阅读 542

特点: 静态资源 支持导入第三方工具 支持代码分割 支持模块热更新

安装

1.先全局安装 webpack,再在项目目录安装

npm install -g webpack

项目目录下

npm install --save-dev webpack

直接使用 webpack

webpack hello.js hello.bundle.js

简单示例使用

安装必要的 loader

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

hello.js

require ('./world.js')
require('style-loader!css-loader!./style.css')
function(){

}

index.html

<body>
  <script src="hello.bundle.js"></script>
</body>

使用 webpack 命令

Webpack 命令的常用参数: 在命令行中绑定 loader, 自动更新,打包, 显示打包过程, 显示打包模块, 显示为什么打包,

webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch --progress --display-modules --display-reasons --colors

使用 webpack.config.js

单文件输入输出

module.exports={
entry:'/src/script/main.js'

outfile:{
  path:'./dist/js',
  filename:'bundle.js'
  }
}

多文件输入输出

webpack.config.js

module.exports={
entry:'/src/script/main.js'

outfile:{
  path:'./dist/js',
  //占位符: name 表示原文件名,hash当前打包的hash,chunkhash表示每个打包文件的hash,
  filename:'[name]-[hash]-bundle.js'
  //filename:'[name]-[chunkhash]-bundle.js'
  }
}

插件使用

安装使用插件 html-webpack-plugin,让 js 自动引入到 html 中

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

webpack.config.js

var htmlWebpckPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    main: './src/script/main.js',
    a: './src/script/a.js',
  },
  output: {
    path: './dist/',
    filename: 'js/[name]-[hash]-bundle.js',
    publicPath: 'http://cdn.com/',
  },
  plugins: [
    new htmlWebpckPlugin({
      filename: 'index-[hash].html',
      // 嵌入到head标签中
      inhect: 'head',
      template: 'index.html',
      title: 'webpck is good',
      // 压缩
      minify: {
        // 删除注释,删除空格
        removeComments: true,
        collapseWhitespace: true,
      },
    }),
  ],
};

本文链接 https://www.yidiankuaile.com/post/webpack-notes