首页
前端开发
Webpack
webpack_use Webpack学习项目

webpack_use Webpack学习项目

0 次浏览 0 条评论
zip
zip

webpack_use 的 Webpack 学习项目，属于那种“上手快、改起来也方便”的资源，挺适合日常练手或者搞点小实验用的。配置文件写得清楚，基础结构一目了然，能让你对 Webpack 的几个核心概念，比如entry、output、loaders、plugins这些，有个比较直观的理解。

多入口配置的用法挺灵活的，像下面这种写法，主程序和第三方库分开打包，清晰又好维护：

entry: {
  app: './src/index.js',
  vendor: './src/vendor.js'
}

输出文件部分，用了变量名占位的方式，[name]就会自动替换成你的入口名称，便于后续维护：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].bundle.js'
}

加载器配置也比较基础，比如.css文件这块，只用了style-loader和css-loader，初学者看起来也不会头大：

rules: [
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
  }
]

插件部分放了一个HtmlWebpackPlugin，自动生成index.html，省得手动敲那些重复代码：

plugins: [
  new HtmlWebpackPlugin({
    template: './src/index.html'
  })
]

整个项目结构还挺工整的，有src、webpack.config.js、node_modules这些常规文件夹。跑一遍流程后你就知道 Webpack 是怎么打包的，下一步就可以尝试玩点更高级的，比如HMR、代码分割这些。

如果你也有那种“我就想自己配一套 Webpack 来跑跑”的冲动，这个项目确实蛮合适的。

zip 文件大小：784.1KB