webpack高级配置与优化详解_CSS/HTML_

 module.exports = { entry: { index: "./src/index.js", // 指定打包输出的chunk名为index foo: "./src/foo.js" // 指定打包输出的chunk名为foo }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径 filename: "index.html", // 打包输出后该html文件的名称 chunks: ["index"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，index页面只引入index.js }), new HtmlWebpackPlugin({ template: "./src/index.html", // 要打包输出哪个文件，可以使用相对路径 filename: "foo.html", // 打包输出后该html文件的名称 chunks: ["foo"] // 数组元素为chunk名称，即entry属性值为对象的时候指定的名称，foo页面只引入foo.js }), ] }

 let foo = 1; console.lg(`console对象的方法名log写成了lg`); // 源文件第二行出错 index.js:1 Uncaught TypeError: console.lg is not a function at Object. (index.js:1) at o (index.js:1) at Object. (index.js:1) at o (index.js:1) at index.js:1 at index.js:1

 //# sourceMappingURL=index.js.map

 //# sourceURL=webpack:///./src/index.js

 //# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvaW5kZXguanM/YjYzNSJdLCJuYW1lcyI6WyJmb28iLCJjb25zb2xlIiwibGciXSwibWFwcGluZ3MiOiJBQUFBLElBQUlBLEdBQUcsR0FBRyxDQUFWO0FBQ0FDLE9BQU8sQ0FBQ0MsRUFBUix1RSxDQUFxQyIsImZpbGUiOiIuL3NyYy9pbmRleC5qcy5qcyIsInNvdXJjZXNDb250ZW50IjpbImxldCBmb28gPSAxO1xuY29uc29sZS5sZyhgY29uc29sZeWvueixoeeahOaWueazleWQjWxvZ+WGmeaIkOS6hmxnYCk7IC8vIOa6kOaWh+S7tuesrOS6jOihjOWHuumUmVxuIl0sInNvdXJjZVJvb3QiOiIifQ== //# sourceURL=webpack-internal:///./src/index.js

 module.exports = { watch: true, watchOptions: { poll: 1000, // 每隔一秒轮询一次文件是否发生变化 aggregateTimeout: 1000, // 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里 ignored: /node_modules/ // 排除一些文件的监听 } }

 const {CleanWebpackPlugin} = require("clean-webpack-plugin"); module.exports = { plugins: [ new CleanWebpackPlugin() // 打包前清空输出目录 ] }

 module.exports = { plugins: [ new CopyWebpackPlugin([ { from: "./readMe.md", // 将项目根目录下的readMe.md文件一起拷贝到输出目录中 to: "" // 属性值为空字符串则表示是输出目录 } ]) ] }

 module.exports = { plugins: [ new webpack.BannerPlugin("Copyright © 2019") // 在js文件头部添加版权说明 ] }

 // index.js const xhr = new XMLHttpRequest(); // xhr.open("get", "http://localhost:3000/api/test"); // 由于跨域问题无法直接访问到http://localhost:3000下的资源 xhr.open("get", "/api/test"); // 本来是要访问http://localhost:3000/api/test xhr.onreadystatechange = () => { if (xhr.readyState === 4) { console.log(xhr.responseText); } } xhr.send();

 module.exports = { devServer: { proxy: { "/api": "http://localhost:3000" // 路径以/api开头则代理到localhost:3000上 } } }

 module.exports = { devServer: { proxy: { "/api": { target: "http://localhost:3000", pathRewrite: {"/api": ""} // 将/api替换掉 } } } }

 before(app) { // 此app即webpack的devServer app.get("/api/test", (req, res, next) => { res.json({name: "even"}); }) }

 const express = require("express"); const app = express(); const webpack = require("webpack"); // 引入webpack const config = require("./webpack.config.js"); // 引入配置文件 const compiler = webpack(config); // 创建webpack的编译器 const middleWare = require("webpack-dev-middleware"); //引入webpack的中间件 app.use(middleWare(compiler)); // 将compiler编译器交给中间件处理 app.get("/api/test", (req, res, next) => { res.json({name: "lhb"}); }); app.listen(3000);

 // index.js const foo = require("./foo"); // 必须写全foo.js模块的路径 // const foo = require("foo"); // resolve.modules中配置了模块解析路径为.src目录，则可用只写foo即可搜索到foo.js模块 console.log(foo); module.exports = { resolve: { modules: [path.resolve(__dirname, "./src/"), "node_modules"] }, }

 // const foo = require("./a/b/c/foo"); // foo.js在./src/a/b/c/foo.js // const foo = require("foo"); // foo被映射成了./src/a/b/c/foo.js文件 const foo = require("bar/foo.js"); // bar被映射成了./src/a/b/c/路径 console.log(foo); module.exports = { resolve: { alias: { "foo": path.resolve(__dirname, "./src/a/b/c/foo.js"), "bar": path.resolve(__dirname, "./src/a/b/c/") } }, }

 module.exports = { resolve: { mainFields: ["style", "main"] }, }

 module.exports = { resolve: { extensions: ["js", "vue"] }, }

 module.exports = { plugins: [ new webpack.DefinePlugin({ DEV_MODE: JSON.stringify('development') // 将'development'设置为全局变量DEV_MODE }), ] }

 module.exports = { module: { noParse:/jquery/,//不去解析jquery中的依赖库 } }

 Entrypoint index = index.js [./src/bar.js] 55 bytes {index} [built] [./src/foo.js] 21 bytes {index} [built] [./sr
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：完美实现CSS垂直居中的11种方法_经验交流_
                                                                
下一篇：5个HTML5的常用本地存储方式详解与介绍_CSS/HTML_