webpack一些手动配置记录-CSDN博客

本文链接：https://blog.csdn.net/yuanfangyoushan/article/details/104672082

首先npm一波：

npm i webpack -D
npm i webpack-cli -D

webpack默认情况下约定大于配置，即不指定时，默认入口entry是 src -> index.js,打包好的出口output文件是dist文件夹下的main.js

如果想要指定，在webpack.config.js中，这样写即可：

const path = require('path')
const config = {
  entry: {
    main: 'path/to/your/entry/index.js'
  }，  
  output: {
    filename:'[name].bundle.js',
    path: path.join(__dirname,'./dist')  
  }}
module.exports = config

另外，webpack.config.js中（即node.js）支持的引出模块的语法是
module.exports = {}
ES6才支持export default = {}

然后配置mode

webpack.config.js中，mode是唯一必须要配置的

mode: 'development'
    //或者 mode: 'production',

webpack配置实时更新：

npm i webpack-dev-server -D

webpack-dev-server 配置属性：

有三种方法：
有配置文件方式、package.json方式和纯node的API实现方式,下面是

package.json方式

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --hot --progress --compress --port 3005 --host 127.0.0.8"
// --open到之后都是可选项 
// --open是自动打开浏览器，可以设置使用哪个浏览器
// --hot是自动刷新 
// --progress
// --compress 当它被设置时候对所有的服务器资源采用gzip压缩
// --port 设置端口号
// --host 设置服务器的主机号
  },

配置文件方式

devServer: {
    contentBase: "./",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    host:'0.0.0.0',
    port:7000,
    hot:true,
    inline: true,//实时刷新
    hot:true,//自动刷新
    compress:true,//当它被设置时候对所有的服务器资源采用gzip压缩
    overlay: true, //用于在浏览器输出编译错误的，默认是关闭的，需要手动打开：
    stats: "errors-only" ,//这个配置属性用来控制编译的时候shell上的输出内容，因为我们并不需要所有的内容，而只是需要部分的如errors等
    open:true, //是自动打开浏览器，可以设置使用哪个浏览器
    proxy: { //重定向是解决跨域的好办法，当后端的接口拥有独立的API，而前端想在同一个domain下访问接口的时候，可以通过设置proxy实现。
        "/api": {
            target: "http://localhost:3000",
            pathRewrite: {"^/api" : ""}
        }
    }，//重定向
}

其他一些常见配置

HtmlWebpackPlugin简化html文件的创建。自动匹配不断变化的文件，省去了手动维护。

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const hwp = new htmlWebpackPlugin({
            template: path.join(__dirname, 'src/index.html'), // 源文件
            filename: 'index.html' // 生成的内存中首页的名字
        })

module.exports = {
    // mode: 'development'
    // 约定大于配置
    mode: 'production',
    plugins:[
        hwp
    ],
   module: { //要打包的第三方模块
    rules: [
      { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ },
        { test:/\.css$/, use:[ 'style-loader', 'css-loader?modules' ] }
    ]
},
resolve: {
        // 表示默认补全文件后缀
        extensions: ['.js', '.jsx', 'json'],
         // resolve.alias  配置项通过别名来把原导入路径映射成一个新的导入路径。
        alias: { // 用@指代这个绝对路径
                '@': path.join(__dirname,'./src')
            }
    }

}