webpack基础.md

webpack

webpack是一个模块打包机,他把项目当作一个整体，通过一个或多个给定的的主文件，webpack将从这个文件开始找到项目的所有依赖文件，使用loaders或plugins处理它们，最后打包成一个或多个浏览器可识别的js文件

安装 webpack 依赖

yarn add webpack webpack-cli -D

配置文件 webpack.config.js

基本概念

• 模式

通过选择 development或production之中的一个，来设置mode参数，你可以启用相应模式下的webpack内置的优化

• 入口

入口起点指示webpack应该使用那个模块，来作为构建其内部依赖图的开始。

• 出口

output属性告诉webpack在那里输出它创建的bundles,以及如何命名这些文件，默认值./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个output字段

• loader

loader让webpack能够处理那些非javaScript文件(webpack自身只理解javaScript)。loader可以将所有的文件转换webpack能够处理的有效模块。

• plugins

loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

基础配置

const path = require('path')
module.exports = {
  mode: 'development',
  entry: './index.js' // 打包入口文件
  output: {
    path: path.resolve(__dirname,'dist') //项目打包基础目录，
    filename: 'main.js'
  },
}

配置开发服务器

yarn add webpack-dev-server -D

{
devServer: {
port: 3000,
progress:true,
compress: true,
contentBase: './dist',

}
}

自动生成html模版

html-webpack-plugin

new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'index.html',
      minify: {
        removeAttributeQuotes: true
        //collapseWhitespace: true
      }
      // hash: true
    }),

css处理

• 识别css模块
• 引入link标签
• 浏览器兼容前缀

yarn add css-loader style-loader postcss-loader autoprefixer

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

新建postcss.config.js

module.exports = {
  plugins: [require('autoprefixer')]
};

处理less

yarn add less-loader

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

es6 转 es5

yarn add babel-loader @babel/core @babel/preset-env -D
 {
        test: /\.js$/i,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }

es7 支持

yarn add '@babel/polyfill' // 不要-D
import ('@babel/polyfill')

配置 eslint

yarn add eslint eslint-loader
{
  test:'/\.css$/i',
  use: {
    loader: 'eslint-loader',
    option: {
      enforce: 'pre' // pre
    }
  }


}

// 根目录下新建.eslintrc.json

webpack 打包图片

1、在js中创建图片来引入

yarn add file-loader
{
test: /\.(png|jpg\gif)/i,
loader: 'file-loader '
}

2、在css中引入背景图片

background:url("./logo.png") //css-loder自动转换

3、<img src="">

yarn add html-withimg-loader -D

{
test: /\..html\$/i,
loader: 'html-withimg-loader'
}

删除原先目录

yarn add clean-wbpack-plugin -D
new CleanWbpackPlugin('./dist')

webpack跨域问题

devServer: {
    port: 3000,
    progress: true,
    contentBase: './dist',
    open: true,
    compress: true, //压缩,
    proxy: {
      '/api': 'www.baidu.com'
      // https://segmentfault.com/a/1190000016199721?utm_source=tag-newest
    }
  },