项目自动化构建工具webpack
2019-03-03 本文已影响0人
书简_yu
webpack
webpack是一个现代js应用程序的静态模块的打包器(module bundler)
项目自动化构建工具
npm i webpack webpack-cli -D
// loader 管理资源
{test: /\.css$/, use: ['style-loader', 'css-loader']}
{test: /\.(png|svg|jpg|gif)$/, use: ['file-loader'] }
{test: /\.(woff|woff2|eot|ttf|otf)$/, use: ['file-loader']}
// plugin 管理输出
npm i html-webpack-pugin clean-webpack-plugin -D
plugins: [
new HtmlWebpackPlugin({title: 'yu'}), // 建立index.html关联js文件
new CleanWebpackPlugin() // 清理dist文件夹
]
// 开发
devtool: 'inline-source-map' // 跟踪错误和警告
npm i webpack-dev-server -D
devServer: { // 代码自动编译
contentBase: './dist'
}
// Hot Module Replacement(js模块热替换要做额外处理, css不用,三大框架不用,他们有loader处理)
devServer: {
contentBase: './dist',
hot: true,
}
demo地址:
https://github.com/hug-love/webpack-demo.git
- other
.gitignore
# aaa //此为注释
/node_module/ //忽略根目录下的node_moudle目录下的所有文件
node_module/ 也行
demo.js // 忽略demo.js文件
!demo.js // 不忽略demo.js文件