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文件