webpack的基本配置

标签：rod   文件的   开发   关闭   use   style   加载   hash   开发模式   webpack的基本配置 初始化项目 npm init 创建各类需要打包的文件，**html、css、js **等 创建 webpack.config.js 配置文件，其中有5大基本配置 entry 入口文件，一般会引用 node 模块中的 path 来查找文件的路径，当需要配置多入口文件时，entry 需要以对象的形式存在，每一个入口名对应为一个 chunks 口，当模块需要使用不同的入口文件时需对应 chunks 。 entry: { main: ["@babel/polyfill", path.resolve(__dirname, ‘../src/index.js‘)], // 入口文件 hearder: path.resolve(__dirname,‘../src/hearder.js‘) } plugins:[ new HtmlWebpackPlugin({ template:path.resolve(__dirname,‘../public/index.html‘), filename:‘dist-index.html‘, chunks:[‘main‘] // 与入口文件对应的模块名 }), new HtmlWebpackPlugin({ template:path.resolve(__dirname,‘../public/hearder.html‘), filename:‘hearder.html‘, chunks:[‘hearder‘] // 与入口文件对应的模块名 }) ] 出口文件 output output: { filename: ‘build.js‘, // 可以自定义打包后的文件名 path: Path.resolve(__dirname, ‘./dist‘) // 打包后的文件输出位置 } Module 打包配置 解析 html 文档时，需要使用 html-loader 加载器，并且这个加载器使用的规范是 es6 规范，而 webpack 使用的是 CMD，所以需要在配置中关闭 es6 规范。否则会出错。 解析 CSS 资源时，需要引入相应的加载器解析。 解析 CSS 资源中的图片时，需要用到 url-loader 加载器，url-loader 加载器依赖于 file-loader 加载器。 module: { rules: [ // 解析 html 文档 { test: /\.html$/, loader: ‘html-loader‘, options: { esModule: false // 关闭es6模块化规范 } }, // 解析 sass 样式 { test: /\.s[ac]ss$/, use: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘] // 从右向左顺序解析 }, // 解析图片资源 { test: /\.(png|svg|jpg|gif)$/, loader: ‘url-loader‘, options: { limit: 4 * 1024, esModule: false, name: ‘image/[hash:10].[ext]‘ // 对打包后的图片资源改名并存放于新建的image文件夹下 } } ] } mode 开发模式 mode: ‘development‘ // 开发模式 mode: ‘production‘ // 生产模式 插件 Plugin 以数组形式存在，用到的插件需要在此配置下新建实例 plugins: [ new HtmlWebpackPlugin({ template: Path.resolve(__dirname, ‘./src/index.html‘), filename: ‘index_build.html‘ }) ] webpack的基本配置标签：rod   文件的   开发   关闭   use   style   加载   hash   开发模式   原文地址：https://www.cnblogs.com/wwjjhh/p/14889789.html