webpack4

webpack4

#查看webpack版本
1.npm info webpack（显示了最新版本）/npm view webpack versions
2.webpack -v
如果没有出现，npm install --global webpack-cli，因为
注意:webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，所以还需要安装webpack-cli；
之后再webpack -v
//========================
#webpack4开始

安装 
npm install webpack-cli -g

基本使用
webpack输入文件.js 输出文件.js

打包命令
webpack index.js -o output_test.js // 生产环境
webpack --mode development index.js -o output_test_d.js // 开发环境


#蛋：

--save   <=> -S     
--save-dev  <=> -D 

2、npm i --save-dev  <packname>  

      工程构建（开发时、“打包”时）依赖 ；例：xxx-cli , less-loader , babel-loader...
3、npm i --save <packname> 

      项目（运行时、发布到生产环境时）依赖；例：antd , element,react...

安装：npm i -D html-webpack-plugin

为了缓存，你会发现打包好的js文件的名称每次都不一样。使用webpack插件将打包出来的js文件引入到html中
npm i -D html-webpack-plugin

// webpack.config.js 
const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin')

配置如

module.exports = {
    mode:'development', // 开发模式
    entry: path.resolve(__dirname,'../src/main.js'),    // 入口文件
    output: {
      filename: '[name].[hash:8].js',      // 打包后的文件名称
      path: path.resolve(__dirname,'../dist')  // 打包后的目录
    },
    plugins:[
      new HtmlWebpackPlugin({
        template:path.resolve(__dirname,'../public/index.html')
      })
    ]
}
// 打包生成的js文件已经被自动引入html文件中

 安装：clean-webpack-plugin

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    // ...省略其他配置
    plugins:[new CleanWebpackPlugin()]
}
// 执行npm run build 会发现dist文件夹里会残留上次打包的文件，在打包输出前清空文件夹clean-webpack-plugin

在入口js中引入css文件

解析css文件
安装：npm i -D style-loader css-loader
解析less文件
安装：npm i -D less less-loader

// webpack.config.js
module.exports = {
    // ...省略其他配置
    module:{
      rules:[
        {
          test:/\.css$/,
          use:['style-loader','css-loader'] // 从右向左解析原则
        },
        {
          test:/\.less$/,
          use:['style-loader','css-loader','less-loader'] // 从右向左解析原则
        }
      ]
    }
} 

为css添加浏览器前缀

安装：npm i -D postcss-loader autoprefixer

 

 

优化打包速度

 优化打包速度
mode可设置development production两个参数
如果没有设置，webpack4 会将 mode 的默认值设置为 production 
production模式下会进行tree shaking(去除无用代码)和uglifyjs(代码压缩混淆

 

end.