首页 > 代码库 > webpack 总结(写了个开头 想想还是不写了留着官网和别人博客地址)
webpack 总结(写了个开头 想想还是不写了留着官网和别人博客地址)
关于webpack的资料大体分3处 ,一处是官网(纯英文,资料比较多),一处是中文网(不建议,就如不知道谁说的一句话,讲的是1+1,而实际用的却是微积分难度),还有各大博客,知识点零散,无系统知识架构,所以只好慢慢根据官网总结。
配置文件config:可以自己写也可以默认的webpack init生成
配合npm 使用
"scripts": {
"build": "webpack"
},
可以用“--”传自定义参数进去,请大胆使用es2015里面的import/export
var path = require(‘path‘); module.exports = { entry: ‘./app/index.js‘, output: { filename: ‘bundle.js‘, path: path.resolve(__dirname, ‘dist‘) 第一个参数是模块绝对路径 } };
当运行build命令之后就会在当前路径的基础上,参照dist生成文件
安装:
npm install webpack –g 至于全局和局部安装问题,一个是在npm的安装目录下 一个是在项目node_modules下,但是全局安装后还是需要局部安装,因为需要用到require,require无法引入全局安装的模块
"scripts": { "start": "webpack --config mywebpack.config.js" }
下面是官方给的配置例子
var path = require(‘path‘); module.exports = { entry: "./app/entry", //入口output: { path: path.resolve(__dirname, "dist"), // string输出的目录 filename: "bundle.js", // string 输出的名字 publicPath: "/assets/", // string 静态资源目录 library: "MyLibrary", // string, // the name of the exported library libraryTarget: "umd", // universal module definition // the type of the exported library /* Advanced output configuration (click to show) */ }, module: { rules: [ // rules for modules (configure loaders, parser options, etc.) { test: /\.jsx?$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "app/demo-files") ], // these are matching conditions, each accepting a regular expression or string // test and include have the same behavior, both must be matched // exclude must not be matched (takes preferrence over test and include) // Best practices: // - Use RegExp only in test and for filename matching // - Use arrays of absolute paths in include and exclude // - Try to avoid exclude and prefer include issuer: { test, include, exclude }, // conditions for the issuer (the origin of the import) enforce: "pre", enforce: "post", // flags to apply these rules, even if they are overridden (advanced option) loader: "babel-loader", // the loader which should be applied, it‘ll be resolved relative to the context // -loader suffix is no longer optional in webpack2 for clarity reasons // see webpack 1 upgrade guide options: { presets: ["es2015"] }, // options for the loader }, { test: "\.html$", use: [ // apply multiple loaders and options "htmllint-loader", { loader: "html-loader", options: { /* ... */ } } ] }, { oneOf: [ /* rules */ ] }, // only use one of these nested rules { rules: [ /* rules */ ] }, // use all of these nested rules (combine with conditions to be useful) { resource: { and: [ /* conditions */ ] } }, // matches only if all conditions are matched { resource: { or: [ /* conditions */ ] } }, { resource: [ /* conditions */ ] } // matches if any condition is matched (default for arrays) { resource: { not: /* condition */ } } // matches if the condition is not matched ], /* Advanced module configuration (click to show) */ }, resolve: { // options for resolving module requests // (does not apply to resolving to loaders) modules: [ "node_modules", path.resolve(__dirname, "app") ], // directories where to look for modules extensions: [".js", ".json", ".jsx", ".css"], // extensions that are used alias: { // a list of module name aliases "module": "new-module", // alias "module" -> "new-module" and "module/path/file" -> "new-module/path/file" "only-module$": "new-module", // alias "only-module" -> "new-module", but not "module/path/file" -> "new-module/path/file" "module": path.resolve(__dirname, "app/third/module.js"), // alias "module" -> "./app/third/module.js" and "module/file" results in error // modules aliases are imported relative to the current context }, /* alternative alias syntax (click to show) */ /* Advanced resolve configuration (click to show) */ }, performance: { hints: "warning", // enum maxAssetSize: 200000, // int (in bytes), maxEntrypointSize: 400000, // int (in bytes) assetFilter: function(assetFilename) { // Function predicate that provides asset filenames return assetFilename.endsWith(‘.css‘) || assetFilename.endsWith(‘.js‘); } }, devtool: "source-map", // enum // enhance debugging by adding meta info for the browser devtools // source-map most detailed at the expense of build speed. context: __dirname, // string (absolute path!) // the home directory for webpack // the entry and module.rules.loader option // is resolved relative to this directory target: "web", // enum // the environment in which the bundle should run // changes chunk loading behavior and available modules externals: ["react", /^@angular\//], // Don‘t follow/bundle these modules, but request them at runtime from the environment stats: "errors-only", // lets you precisely control what bundle information gets displayed devServer: { proxy: { // proxy URLs to backend development server ‘/api‘: ‘http://localhost:3000‘ }, contentBase: path.join(__dirname, ‘public‘), // boolean | string | array, static file location compress: true, // enable gzip compression historyApiFallback: true, // true for index.html upon 404, object for multiple paths hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin https: false, // true for self-signed, object for cert authority noInfo: true, // only errors & warns on hot reload // ... }, plugins: [ // ... ], // list of additional plugins /* Advanced configuration (click to show) */ }
基于vue官方脚手架教程:别人博客
http://donglegend.com/2016/08/25/webpack%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF04/#
webpack 总结(写了个开头 想想还是不写了留着官网和别人博客地址)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。