a typeScript + react + webpack project
npm run dev
npm run build
仅说明module
和plugins
中的选项
{
test: /\.scss$/,
// 此处需要注意:loader 的顺序是从右向左执行,
// 即:先 sass-loader 把 scss 编译成 css,再由 css-loader 编译成 css 文件,最后由 style-loader 把 css 插入到 html 中
use: ['style-loader', 'css-loader', 'sass-loader',
{
loader: 'sass-resources-loader', //此处为了公共的sass样式能够全局加载,而不用每个组件都单独引用。
options: {
resources: projectRootUrl + '/src/assets/scss/style.scss'
}
}
]
}
CleanWebpackPlugin
清理文件夹
HtmlWebpackPlugin
热更新
ProvidePlugin
...
OccurrenceOrderPlugin
模块排序,可减少文件大小
--no-inline
vs--inline
// 默认开启inline模式,可以通过--no-inline
关闭默认
--devtool eval-source-map
// 调试模块使用
--hot
// 热加载 ps: 据说配置这个后,仍然需要在plugins
中配置webpack.HotModuleReplacementPlugin
--colors
// 表示给显示出来的进度加点颜色
--content-base
// 表示设置目录
--quiet
// 控制台中不输出打包的信息
--compress
// 开启gzip压缩
--progress
// 显示打包的进度