项目目录结构
目录结构.png
- node_modules是依赖模块放的地方，不必管（有些模块的代码里会有说明文档，可以在node_modules里查看）
- src放源码
- .babelrc是Babel插件的配置文件
- .gitignore是git的忽略配置，一般肯定会选择忽略node_modules文件夹
- index.js是入口文件，webpack 从这里开始打包依赖
- package.json里边有所有的依赖模块的信息，还有npm的命令（script对象下的内容）
- package-lock.json，锁定初次安装时的依赖版本
- postcss.config.js是postcss的配置文件
- template.html是模板html，用HtmlWebpackPlugin这个插件时必须的提供的文件
- webpack.*.config.js是webpack的配置文件，分为开发环境与生产环境两个版本，其中共同的部分可以提取出来
webpack.config
/*
*
* config的组成部分
* 入口 从那个文件开始构建
* 输出 在哪里输出打包好的bundles
* loader 如何处理非JS文件
* 插件 用以解决loader无法解决的问题
*
*/
/*
* Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），
* Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，
* 最后打包为一个（或多个）浏览器可识别的JavaScript文件。
*/
//使用插件，需要先在这里引用，例如
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
module.exports = {
//entry可以简写成字符串的形式，也可以导入数组字符串，这种写法缺少扩展性
//entry: './index.js',
//常用对象的写法 entry: {[entryChunkName: string]: string|Array<string>}
entry:{
index: './index.js'
},
//即便存在多个入口起点，但只能有一个出口配置，一个配置可以产生多个出口文件
//如果只输出一个文件，也可以写死文件名，下面这种写法，会动态生成多个出口文件
output: {
filename: '[name].js',
path: __dirname + '/dist'
},
module: {
rules: [
{
test: /\.css$/,
//这里的use也可以写成
// use: [
// 'style-loader',
// 'css-loader'
// ]
use: [
{loader: 'style-loader'},
{
loader: 'css-loader',
options: {
modules: true
}
},
//css自动补全插件
{loader: "postcss-loader"}
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
'file-loader'
]
},
//字体文件 在css中用@font-face来引用的时候会被处理
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
//加载数据文件的配置，json是默认支持的
{
test: /\.(csv|tsv)$/,
use: [
'csv-loader'
]
},
{
test: /\.xml$/,
use: [
'xml-loader'
]
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
//webpackDevServer配置
devServer: {
contentBase: './dist',
hot: true,
//代理转发请求的配置
proxy: {
'/': {
target: 'http://10.11.115.19:8099',
changeOrigin: true
}
}
},
//官方推荐的sourcemap开发时的最佳配置,eval-source-map功能最强性能最差，eval性能最好，功能最简单,这个选项不可以在生产环境使用,有安全和性能问题
devtool:'eval-source-map',
//不要devtool和plugin同时使用,这里指对同一个插件
plugins: [
//html模板插件
new HtmlWebpackPlugin({template: './template.html'}),
//清理dist目录插件
new CleanWebpackPlugin(['dist']),
//热加载的配置
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
}
//有关于package.json的注释
//scripts: 这里是npm脚本,参数后边的两个中横线代表传递给命令的参数
//devDependencies: 这里对应的命令是npm install --save-dev，这里的依赖只有在开发时有用
//dependencies: 这里对应的命令是npm install --save，这里的依赖将一直存在，项目上线时也会被打包
//.babelrc文件用于配置babel，这个JSON文件会使babel生效 https://babeljs.cn/docs/setup/#installation
babelrc配置
{
"presets": ["env","react"]
}
postcss配置
module.exports = {
plugins: [
require('autoprefixer')
]
}
