{"id":16794997,"url":"https://github.com/kingzez/webpack-demo","last_synced_at":"2025-04-11T00:01:55.445Z","repository":{"id":90695146,"uuid":"89578153","full_name":"kingzez/webpack-demo","owner":"kingzez","description":"just exercise，all of is very basic","archived":false,"fork":false,"pushed_at":"2022-09-27T08:49:57.000Z","size":37,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"loader","last_synced_at":"2025-03-24T20:43:02.457Z","etag":null,"topics":["html-webpack-plugin","loaders","tutorial","tutorial-code","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kingzez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-27T09:05:05.000Z","updated_at":"2021-05-14T05:54:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"0de020cd-e31a-408b-b1ae-61c4c70d5b73","html_url":"https://github.com/kingzez/webpack-demo","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingzez%2Fwebpack-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingzez%2Fwebpack-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingzez%2Fwebpack-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kingzez%2Fwebpack-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kingzez","download_url":"https://codeload.github.com/kingzez/webpack-demo/tar.gz/refs/heads/loader","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248317705,"owners_count":21083528,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html-webpack-plugin","loaders","tutorial","tutorial-code","webpack"],"created_at":"2024-10-13T09:15:08.516Z","updated_at":"2025-04-11T00:01:55.417Z","avatar_url":"https://github.com/kingzez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# webpack基础配置纪实\n\u003c!--more--\u003e\n\n## entry 打包入口配置\n接受三种方式：string， array， object\n\n```javascript\nmodule.exports = {\n    entry: './src/main.js'\n    ...\n}\n```\n\n```javascript\nmodule.exports = {\n    entry: ['./src/main.js', './src/test.js']\n    ...\n}\n```\n\n```javascript\nmodule.exports = {\n    entry: {\n        main: './src/main.js',\n        test: './src/test.js'\n    }\n    ...\n}\n```\n\n## output 打包导出配置\n\n```javascript\nmodule.exports = {\n    entry: {\n        main: './src/main.js',\n        a: './src.a.js'\n    },\n    output: {\n        path: './dist',\n        filename: 'js/[name]-[chunkhash].js',\n        publicPath: 'http://cdn.com/'\n    }\n    ...\n}\n```\n\npath：打包后导出的文件路径\n\nfilename：打包后的文件名\n\n    [name]对应文件名\n    [hash]打包文件hash值\n    [chunkhash]打包后每个单独文件的hash值\npublicPath：打包上线环境，用来替换文件路径\n\n## plugins 插件系统(数组)\n\nhtml-webpack-plugin 自动化生成项目中的html页面\n\n通过npm安装\n\n```bash\n$ npm install html-webpack-plugin --save-dev\n```\n\n在webpack.config.js中\n\n```javascript\nvar htmlWebpackPlugin = require('html-webpack-plugin');\n\nmodule.exports = {\n    entry: {\n        main: './src/main.js',\n        a: './src/a.js',\n        b: './src/b.js',\n        c: './src/c.js'\n    },\n    output: {\n        path: './dist',\n        filename: [name]-[chunkhash].js,\n        public: 'http:cdn.com/'\n    },\n    plugins: [\n        //创建一个htmlWebpackPlugin对象，并传入值\n        new htmlWebpackPlugin({\n            template: 'index.html', //生成html文件的模板文件\n            filename: 'a.html', //目标文件的名称\n            inject: false,  //插入html文档中的位置，value分别为 true，false，head，body\n            title: 'this is a.html', // 传入的html的title\n            excludeChunks: ['b', 'c'] // 引入的除b.js 与c.js以外的js文件\n        }),\n        new htmlWebpackPlugin({\n            template: 'index.html',\n            filename: 'b.html',\n            inject: false,\n            title: 'this is b.html',\n            excludeChunks: ['a', 'c']\n        }),\n        new htmlWebpackPlugin({\n            template: 'index.html',\n            filename: 'c.html',\n            inject: false,\n            title: 'this is c.html',\n            excludeChunks: ['a', 'b']\n        })\n    ]\n}\n\n```\n\nindex.html模板文件\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"\u003e\n    \u003c!-- 在webpack中默认识别ejs --\u003e\n    \u003c!-- title的值为htmlWebpackPlugin传入的值 --\u003e\n    \u003ctitle\u003e\u003c%= htmlWebpackPlugin.options.title %\u003e\u003c/title\u003e\n    \u003cscript\u003e\n        // js的行内引入方法\n        \u003c%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %\u003e\n    \u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003c!-- 再通过循环遍历除去main.js 外联引入对应的js --\u003e\n    \u003c% for (var k in htmlWebpackPlugin.files.chunks) { %\u003e\n        \u003c% if (k != 'main') { %\u003e\n            \u003cscript type=\"text/javascript\" src=\"\u003c%= htmlWebpackPlugin.files.chunks[k].entry %\u003e\"\u003e\u003c/script\u003e\n        \u003c% } %\u003e\n    \u003c% } %\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\u003e- html-webpack-plugin更多api移步[官方api](https://github.com/jantimon/html-webpack-plugin)查看\n\n\u003e- 涉及webpack源码的[行内引入js](https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade#L10)\n\n至此工程目录结构为\n\n![](http://7xkghm.com1.z0.glb.clouddn.com/image/blog/webpack-demo-1.pngj)\n\n关于html-webpack-plugin插件的使用，工程源码\n\n```shell\ngit clone https://github.com/kingzez/webpack-demo.git\n```\n\n首先切换到\n\n```shell\ngit checkout html-webpack-plugin\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看效果。\n\n\n## Loaders\n\n\u003e - babel-loader\n\u003e - css-loader\n\u003e - style-loader\n\u003e - postcss-loader\n\u003e - less-loader\n\u003e - sass-loader\n\u003e - html-loader\n\u003e - ejs-loader\n\u003e - file-loader\n\u003e - url-loader\n\u003e - image-webpack-loader\n\nLoaders 同样也是一个数组，需要定义在一个module中\n\n```javascript\nmodule: {\n    loaders: [\n        ...\n    ]\n}\n```\n\n### babel-loader\nbabel-loader 用于对ES6的代码的转换，首先在终端中执行npm\n```shell\nnpm install --save-dev babel-loader babel-core\n```\n然后再webpack.config.js中加入\n\n```javascript\nmodule.exports = {\n    context: '__dirname',\n    entry: './src/app.js',\n    output: {\n        path: './dist',\n        filename: 'js/[name].bundle.js'\n    },\n    module: {\n                loaders: [{\n                    test: /\\.js$/,\n                    loader: 'babel',\n                    include: path.resolve(__dirname, 'src'), //path.resolve node的api，用于处理路径；__dirname为当前项目目录，\n                    exclude: path.resolve(__dirname, 'node_modules'),\n                    query: {\n                        presets: ['latest'] // babel的配置，可在webpack.config.js中配置也可在package.json或创建.babelrc文件\n                    }\n            }\n        ]\n    }\n}\n```\n\n### css-loader \u0026 style-loader \u0026 postcss-loader\ncss-loader 用于处理css模块的打包, style-loader 用于将打包好的css模块插入html中,安装\n\n\n```shell\nnpm install --save-dev css-loader\n```\n\n```shell\nnpm install --save-dev style-loader\n```\n\n在webpack.config.js中加入\n\n```javascript\nloaders: [\n    {\n        test: /\\.css$/,\n        loader: 'style-loader!css-loader' // loader处理顺序是css-loader打包css文件，后通过style-loader插入到html中\n    }\n]\n```\n\n在处理浏览器兼容的情况下，需要对各个浏览器加前缀，这时需要css后处理器postcss-loader，安装\n\n```shell\nnpm install --save-dev postcss-loader\n```\n\n```shell\nnpm install --save-dev autoprefixer // 自动添加前缀\n```\n\n在webpack.config.js中加入\n\n```javascript\nmodule: {\n    loaders: [\n        {\n            test: /\\.css$/,\n            loader: 'style-loader!css-loader!postcss-loader' // loader处理顺序post-loader处理后加上浏览器的前缀，再由css-loader打包css文件，后通过style-loader插入到html中\n        }\n    ]\n},\npostcss: [\n    require('autoprefixer')({\n        browsers: ['last 5 versions'] //浏览器的最新五个版本\n    })\n],\n\n```\n\n如果多个css文件之间存在`@import`，以上配置还需要修改\n\n```javascript\nmodule: {\n    loaders: [\n        {\n            test: /\\.css$/,\n            loader: 'style!css?importLoaders=1!postcss' // css-loader的importLoaders参数可以解决@import的css文件不处理的问题\n        }\n    ]\n},\npostcss: [\n    require('autoprefixer')({\n        browsers: ['last 5 versions'] //浏览器的最新五个版本\n    })\n],\n\n```\n\n关于babel-loader css-loader style-loader postcss-loader 的使用，工程源码\n\n```shell\ngit checkout css-style-postcss-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看效果。\n\n### less-loader \u0026 sass-loader\nless-loader 是对less文件进行处理打包，安装\n\n```shell\nnpm install --save-dev less-loader\n```\n\n在webpack.config.js中加入\n\n```javascript\nloaders: [\n    {\n        test: /\\.less$/,\n        loader: 'style!css!postcss!less'\n    }\n]\n```\n\n关于less-loader 的使用，工程源码\n\n```shell\ngit checkout less-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看效果。\n\nsass-loader同理不做过多介绍，简单看一下webpack.config.js\n\n```javascript\nloaders: [\n    {\n        test: /\\.scss$/,\n        loader: 'style!css!postcss!sass'\n    }\n]\n```\n\n### html-loader \u0026 ejs-loader\nhtml-loader 和 ejs-loader 用于处理模板文件，如果你在一个js文件中`import html from 'somewhere'`，接着  `npm run webpack` 会看到报错信息，说没有处理器处理html文件，so 安装\n\n```shell\nnpm install --save-dev html-loader\n```\n\n同样也可以处理ejs模板文件，该ejs模板文件的扩展名也可以自定义，这里我们定义`tpl`\n\n```shell\nnpm install --save-dev ejs-loader\n```\n\n看一下在 webpack.config.js 中\n\n```javascript\nloaders: [\n        {\n            test: /\\.html$/,\n            loader: 'html-loader'\n        },\n        {\n            test: /\\.tpl/,\n            loader: 'ejs-loader'\n        }\n]\n```\n关于html-loader ejs-loader 的使用，工程源码，可分别执行\n\n```shell\ngit checkout less-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看html-loader的效果。\n\n```shell\ngit checkout ejs-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看ejs-loader的效果。\n\n\n### file-loader \u0026 url-loader \u0026 image-webpack-loader\n用于处理图片以及其他文件，例子中对图片处理，先用file-loader处理，那么安装\n\n```shell\nnpm install --save-dev file-loader\n```\n安装完成后对webpack.config.js配置进行修改\n\n```javascript\nloaders: [\n    {\n         test: /\\.png|jpg|gif|svg$/i, //用于匹配各种扩展名结尾的文件\n         loader: 'file-loader',\n         query: {\n             name: 'assets/[name]-[hash:5].[ext]' // 可选 用于将图片打包到assets文件夹中\n         }\n    }\n]\n```\n\n在根目录中的index.html css 中的`img` `background` 的图片引用一般为相对路径，最佳解决方案为线上的CDN绝对路径，在模板文件中的图片引用如果一定要使用相对路径的话，需要这样\n\n```html\n \u003cimg src=\"${ require('../../assets/avator.png') }\" /\u003e\n```\n\n详细代码请看我的工程项目源码，关于 file-loader 的使用，工程源码，执行\n\n```shell\ngit checkout file-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看 file-loader 的效果。\n\n\nurl-loader 同样也可以实现图片的处理，安装\n\n```shell\nnpm install --save-dev url-loader\n```\n\n安装完成后，看一下webpack.config.js\n\n```javascript\nloaders: [\n    {\n        test: /\\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 处理\n        loader: 'url-loader',\n        query: {\n            limit: 20000, //定义限制图片打包大小，超过限制值，会将图片转成base64写入\n            name: 'assets/[name]-[hash:5].[ext]'\n        }\n    }\n]\n```\n较好的方案是 url-loader 与 image-webpack-loader 结合使用，安装\n\n```shell\nnpm install --save-dev image-webpack-loader\n```\n\n安装完成后，看一下webpack.config.js中\n\n```javascript\nloaders: [\n    {\n        test: /\\.png|jpg|gif|svg$/i, // image 可用 file-loader 和 url-loader image-loader 处理\n        loaders: [\n            'url-loader?limit=1000\u0026name=assets/[name]-[hash:5].[ext]',\n            'image-webpack'\n            ]\n    }\n]\n```\n\n首先通过 image-webpackloader 压缩图片后处理再由url-loader处理，通过参数`limit`限制图片大小，图片超过limit限制的值将转成base64，如果没超过限制值，则正常打包图片。\n\n关于 url-loader 与 image-webpack-loader 的使用，工程源码，执行\n\n```shell\ngit checkout image-webpack-loader\n```\n\n并执行 `npm install` 完成依赖的安装后执行 `npm run webpack` 查看 url-loader 与 image-webpack-loader 结合的效果。\n\n完整的webpack.config.js demo查看，请执行\n\n```shell\ngit checkout release\n```\n\n本纪实经过本人实际操作后的记录，算为入门级的实践。\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingzez%2Fwebpack-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkingzez%2Fwebpack-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkingzez%2Fwebpack-demo/lists"}