webpack基础配置_webpack modules&localidentname-CSDN博客

本文链接：https://blog.csdn.net/weixin_41682828/article/details/103859415

#webpack配置

暑假这个时间开始疯狂的点技能树，顺便复习再熟悉一下webpack的配置流程所以就有了这一篇博文。

GitHub链接

入口文件

module.exports = {

    entry: __dirname + "/app/main.js", //入口文件
    output: {
        path: __dirname + "/build", //输出文件夹
        filename: "bundle.js"
    }
}

打包路径
打包编译测试
```
webpack --mode development
```
Source Map安装配置

一个快速对应源文件与编译文件的工具

搭建本地服务器

webpack install --save-dev webpack-dev-werver

Loaders的配置

方便引入不同类型的外部文件，并且进行分析转换。
Babel安装与配置

可以编译ES6/ES5代码
```
npm install --save-dev babel@6 babel-loader babel-preset-env babel-preset-react
```
webpack.config.js中配置基本部分

.babelrc中配置额外部分

.babelrc将自动被调用
安装配置style-loader与css-loader

前者将计算好的样式嵌入页面

后者将实现在文件中引入css文件，类似@import
```
npm install --save-dev style-loader css-loader
```

CSS Moudle

避免同名类名应用不必要的样式

在css-loader的options目下添加配置

不报错：

{
    loader: "css-loader?modules&localIdentName=[name]---[local]---[hash:base64:5]",
    options: {    
        modules: true,
    }

}

报错：

{ 
    loader: "css-loader",    
        options: {
            modules: true, // 指定启用css modules    
            localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
        }

}

安装配置Post-CSS与autoprefixer

npm install --save-dev postcss-loader autoprefixer

在webpack.config.js中添加

{loader: "postcss-loader"}

根目录新建post.config.js,键入

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

#插件配置

安装配置HTML-Webpack-Plugin
```
npm install --save-dev html-webpack-plugin
```
app下新建index.tmpl.html文件模板

修改webpack.config.js的输出目录为"./build"

plugin下引入html-webpack-plugin插件
配置热加载Hot Module Replacement

在webpack.config.js的devServer中加入：

hot: true

plugins数组引入热加载插件：
```
new webpack.HotModuleReplacementPlugin()
```

安装配置react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

在.babelrc中写入：

{
  "presets": ["react", "env"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]
       }]
     }]]
    }
  }
}